css3动画 抖动效果
html结构：
<div class="top">
<a href="#">
<div>
<img src="images/top1.jpg" width="80" height="79" class="to_top" />
</div>
</a>
<a href="index.html">
<div style="border-top:1px solid #f7efd5;border-bottom:1px solid #f7efd5; ">
<img src="images/top2.jpg" width="80" height="79" id="dd" />
</div>
</a>
<a>
<div>
<img src="images/top3.jpg" width="80" height="79" />
</div>
</a>
</div>
css样式：
.dd {
animation: shake 1s;-o-animation: shake 1s;
-webkit-animation: shake 1s;
-moz-animation: shake 1s;
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-o-keyframes shake {
/* Opera */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-webkit-keyframes shake {
/* Safari 和 Chrome */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-moz-keyframes shake {
/* Firefox */
0%, 100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(5px);
}
}
js效果：
<script type="text/javascript">
$("#dd").mouseenter(function () {
$(this).addClass("dd");
});
$("#dd").mouseleave(function () {
$(this).removeClass("dd");
});
</script>
效果：
鼠标经过home图标时，图标会左右晃动。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
