jQuery拆红包抽奖摇一摇Css3动画特效_双11天猫拆红包

动画效果使用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); });

在线演示        积分下载        6毛下载        砍两刀下载