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图标时，图标会左右晃动。