![2b65b91621877d6f5c02f577f89bd0aa.png](https://i-blog.csdnimg.cn/blog_migrate/6c2ebfaa4e75de9d83ad79e1bf0548d6.jpeg)
你是不是跟我一样,一直想学会 CSS 动画?今天我们就一起来花五分钟做几个纯 CSS 加载动画。
前言
CSS 动画不是什么新鲜玩意了,目前所有主流浏览器基本上都已经支持,可以看Can I Use 网站 上的统计数据。文章结尾部分会提到针对老古董浏览器的兼容方案。
网页里经常会用到数据加载中的 loading 效果,当然你也可以用 gif 动图,但更好的做法是用 CSS 动画。
语法
废话少说,先上代码:
<!-- HTML -->
<div class="simple-spinner"></div>
/* CSS */
.simple-spinner {
height: 48px;
width: 48px;
border: 5px solid rgba(150, 150, 150, 0.2);
border-radius: 50%;
border-top-color: rgb(150, 150, 150);
animation: rotate 1s 0s infinite ease-in-out alternate;
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
效果是这样的:
![c30478a62d555ee70efc6eff1db790f1.png](https://i-blog.csdnimg.cn/blog_migrate/4b961c5bb192d15a14d1f1701e37edbb.jpeg)
看起来还不错吧?这是怎么做到的呢?首先我们用<div>
做了一个宽高相等的圆环,设置了边框,其中一边的颜色不一样,border-radius
设置成 50%,就成了圆形。为了设置动画效果,我们做了2件事:
- 给目标元素定义
animation
属性 - 定义
@keyframes
规则