3 css 奖品出现弹出动画_5分钟学会 CSS 动画：纯 CSS 实现 loading 效果

你是不是跟我一样，一直想学会 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); }
}

效果是这样的：

看起来还不错吧？这是怎么做到的呢？首先我们用<div> 做了一个宽高相等的圆环，设置了边框，其中一边的颜色不一样，border-radius 设置成 50%，就成了圆形。为了设置动画效果，我们做了2件事：

1. 给目标元素定义 animation 属性
2. 定义 @keyframes 规则