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