霍者博客

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);}
}

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

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。