动画效果使用css3
@-webkit-keyframes shake {
0% {
-webkit-transform: rotate(2deg) translate3d(0,0,0)
}
50% {
-webkit-transform: rotate(-2deg) translate3d(0,0,0)
}
100% {
-webkit-transform: rotate(2deg) translate3d(0,0,0)
}
}
@-moz-keyframes shake {
0% {
transform: rotate(2deg) translate3d(0,0,0)
}
50% {
transform: rotate(-2deg) translate3d(0,0,0)
}
100% {
transform: rotate(2deg) translate3d(0,0,0)
}
}
@-ms-keyframes shake {
0% {
transform: rotate(2deg) translate3d(0,0,0)
}
50% {
transform: rotate(-2deg) translate3d(0,0,0)
}
100% {
transform: rotate(2deg) translate3d(0,0,0)
}
}
然后用js点击事件触发动画效果
$(".red").click(function(){
$(this).addClass("shake");
setTimeout(function(){
$(".red").removeClass("shake");
$(".windows").fadeIn();
$(".opacity").fadeIn();
},2000);
});