模仿playnext网站hover后抖动的效果

来源：互联网发布：ubuntu 漏洞提权编辑：程序博客网时间：2024/06/05 12:07

偶然情况下看到了playnext网站，对于前端菜鸟来说，其图标抖动的效果十分亮眼。

最开始是打算研究其CSS样式看是怎么实现的，但是。。。在看过CSS样式表后，都在一排。。看之前要花大量时间去排版，于是决定自己研究。

加之最近想攻克CSS3中的动画keyframes，于是就做了下。最初版式用原生JS实现的，后来尝试用jQuery实现，后来更加了解了jQuery后，又简化了jQuey代码。只适配了火狐浏览器，大家可以视情况完善浏览器支持，原理就是定义一个class（我这里取得名字叫shake），让其拥有抖动的动画，接着通过js把鼠标经过的地方添加上该class（.shake）。代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>111</title>    <style type="text/css">    *{margin:0;padding:0;}    .fl{float: left;}    .fl{float: right}    header{width:400px;height: 200px;margin:0 auto;}    a{text-decoration: none;}    ul>li{width:100px;height:50px;float: left;list-style: none;text-align:center;line-height:50px;}    ul>li:active{}    /*开始抖动的CSS样式*/    .shake{position:relative;-moz-animation:shake .01s linear  infinite alternate;}    @-moz-keyframes shake{        0%   {transform:rotage(-2deg); left:0px; top:0px;}        25%  {transform:rotage(2deg); left:1px; top:1px;}        50%  {transform:rotage(0deg); left:-2px; top:-2px;}        75%  {transform:rotage(-2deg);left:-1px; top:-1px;}        100% {transform:rotage(-2deg);left:0px; top:0px;}    }    /*结束抖动的CCS样式*/    </style></head><body>    <header>    <ul>        <li ><a href="#" class="shake_act">测试1</a></li>        <li ><a href="#" class="shake_act">测试2</a></li>        <li ><a href="#" class="shake_act">测试3</a></li>        <li ><a href="#" class="shake_act">测试4</a></li>    </ul>    </header>    <!-- jQuery实现添加rotate样式 -->    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>    <!--第二次用jQury的方法(hover事件)-->    <script type='text/javascript'>    $(function(){        $("a").hover(function() {            $(this).addClass('shake')        }, function() {            $(this).removeClass('shake')        });    })    </script>    <!-- 第一次用jQuery的方法(mouseover/mouseout事件) --> <!--    <script type="text/javascript">     $(".shake_act").mouseover(function(){         $(this).addClass('shake')     })       $(".shake_act").mouseout(function(){         $(this).removeClass("shake")     }) </script> -->    <!-- 原生js实现添加rotate样式 --> <!--  <script type="text/javascript">var lis = document.getElementsByTagName("li");for (i=0;i<lis.length;i++){q1 = lis[i];    function add_anim(){this.className="shake";}function remove_anim(){this.className="";}  q1.addEventListener("mouseover",add_anim,true);  q1.addEventListener("mouseout",remove_anim,false);}    </script>    --></body></html>

0 0