css2d炫酷效果,CSS3炫酷效果-swing、疯狂摆动、脉冲

今天跟大家分享CSS3动画效果

公用代码div{float: left;width: 300px;height: 200px;margin: 0 5px;background:#F39;}

p{text-align: center;color: #fff;font: 16px/200px 微软雅黑;}

swing效果.swing{transform-origin:center top 0;}

/*设置旋转元素的基点位置 默认50% 50% 0*/

.swing:hover{animation:swing 1s linear;}

@keyframes swing{

20%{transform:rotate(15deg);}

40%{transform:rotate(-10deg);}

60%{transform:rotate(5deg);}

80%{transform:rotate(-5deg);}

100%{transform:rotate(0deg);}

}

疯狂摆动效果.wobble:hover{animation:wobble 1s linear;}

@keyframes wobble{

0%,100%{transform:translateX(0%);}

15%{transform:translateX(-25%) rotate(-5deg);}

30%{transform:translateX(20%) rotate(3deg);}

45%{transform:translateX(-15%) rotate(-3deg);}

60%{transform:translateX(10%) rotate(2deg);}

75%{transform:translateX(-5%) rotate(-1deg);}

}

脉冲效果.pulse:hover{animation:pulse 1s linear;}

@keyframes pulse{

0%,100%{transform:scale(1);}

50%{transform:scale(1.1);}

}

继续阅读：CSS3

原创文章请注明转载自霍者博客本文地址：http://www.huozheweb.com/post/655.html，标题：CSS3炫酷效果-swing、疯狂摆动、脉冲