今天跟大家分享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);}
}
