做前端必然离开不了动画特效，提到动画特效，之前首先想到的是用js实现，而随着各大浏览器厂商对css3的普遍支持与兼容，现在用css3就可以轻松实现各种超炫特效。在前端行业，同胞们应该都明白这样一个观点：能用html/css实现的特效就不要用js，不仅仅是因为简单，更重要的是js的执行会有阻塞现象，会消耗更多不必要的资源。那么今天小站就对工作中使用频率高的一些动画进行编写、整理并分享给大家，功大家参考。
注：为了节省空间篇幅和提高阅读清晰度，这里的代码只展示通用代码，对私有的代码属性进行忽略，实际中用到的话请自行添加私有属性。如果动画无法正常执行，请用google浏览器浏览。
1.间隔晃动效果
这种效果使用rotate旋转，并结合linear和infinite属性值以相同速度不限次的间隔旋转。此动画多使用于UI页面边栏提醒或红包摇晃提醒等，效果如下：
代码实现如下：
.shake-effect {
animation: shake 2s linear infinite;
transform-origin: 50% 70%;
}
@keyframes shake {
10%,20% {
transform: rotate(-20deg);
}
5%,15%,25% {
transform: rotate(20deg);
}
0%,30%,100% {
transform: rotate(0deg);
}
}2.永久脉冲动画
脉冲动画, 就是类似一个圆圈向外扩散的效果,多用于搜索场景。效果如下：
代码实现如下：
.pulse-effect {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: pulse;
}
@keyframes pulse {
0% {
transform: scaleX(1)
}
50% {
transform: scale3d(1.05,1.05,1.05)
}
to {
transform: scaleX(1)
}
}3.无限旋转
某个块儿以中心点为轴心点进行无限次的转动，这里使用rotate属性值，参数可用1turn（ 1turn：一圈 ），效果如下：
代码实现如下：
.load-effect {
animation: load 3s linear 1s infinite;
transform-origin:50% 50%;
}
@keyframes load {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}4.奔跑的小人
使用css3实现无限次奔跑的小人，也可绘制其他图形，多用于加载时场景，效果如下：
由于该动画的css源码比较多，就不在此展示了，具体请点击查看
5.模拟逼真的3D效果
以按钮为例，纯html/css实现超逼真的3D效果,效果如下：
由于该动画的css源码比较多，就不在此展示了，具体请点击查看
未完待续……
原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/1488
赞 (3)
Ferrycoln Warning: getimagesize(): PNG file corrupted by ASCII conversion in /www/wwwroot/ms200.cn/wp-content/themes/justnews/themer/functions/aq-resizer.php on line 110
使用AI制作3D立体字效果
« 上一篇
2020年1月1日 pm10:51
关于vue中全局组件通用组件的封装及使用方法介绍
下一篇 »
2020年1月12日 pm5:05
