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

今天跟大家分享CSS3动画效果:
CSS3炫酷效果-swing、疯狂摆动、脉冲
公用代码:

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

人已赞赏
微信开发

人人商城eweishop_3.27.5 - 企业开源修复版-技术共享交流

2020-9-30 17:34:54

设计园地

简单的几行JS代码即可实现自动访问QQ空间功能

2018-5-26 0:17:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索