HTML structure:
<div class= "Top" >
<a href= "#" >
<div>
</div>
</a>
<a href= "index.html" >
<div style= "border-top:1px solid #f7efd5; border-bottom:1px solid #f7efd5; ">
</div>
</a>
<a>
<div>
"
</div>
</a>
</div>
CSS style:
. 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 and 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 Effect:
<script type= "Text/javascript" >
$ ("#dd"). MouseEnter (function () {
$ (this). addclass ("DD");
});
$ ("#dd"). MouseLeave (function () {
$ (this). Removeclass ("DD");
});
</script>
Effect:
When the mouse passes the home icon, the icon will sway around.
CSS3 Animation Jitter Effect