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

最新推荐文章于 2024-04-06 19:32:24 发布

PkJY

最新推荐文章于 2024-04-06 19:32:24 发布

阅读量811

点赞数

分类专栏： HTML/CSS/Javascript 文章标签： javascript jquery css3 html 前端

本文链接：https://blog.csdn.net/a214161398a/article/details/49558699

版权

HTML/CSS/Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

偶然情况下看到了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>

PkJY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿playnext网站hover后抖动的效果

偶然情况下看到了playnext网站，对于前端菜鸟来说，其图标抖动的效果十分亮眼。最开始是打算研究其CSS样式看是怎么实现的，但是。。。在看过CSS样式表后，都在一排。。看之前要花大量时间去排版，于是决定自己研究。加之最近想攻克CSS3中的动画keyframes，于是就做了下。最初版式用原生JS实现的，后来尝试用jQuery实现，后来更加了解了jQuery后，又简化了jQu
复制链接

扫一扫

专栏目录