文章插图
现代浏览器越来越标准化了，这样的好处就是很多好用的css可以跨浏览器运行，效果很不错 。大家看下面两个loading样式，实现起来也非常简单 。
文章插图
首先看下右边那个，它其实只有三种颜色，你看到多余三种颜色，是因为当两种颜色重叠到一起的时候，它会叠加出第三种颜色，这是mix-blend-mode: overlay的结果 。现在我们来详细说一下，
首先是html:
由于有三种颜色，所以HTML结构也非常简单 。
文章插图
每个spinner-sector代表一个颜色，现在我们加入一些基本样式：
文章插图
现在显示结果如下：
文章插图
【前端 - 自己实现好看的loading，其实也简单】加入红色背景，是为了让大家看清楚现在它长什么样 。接下来，我们去掉红色背景，给每个spinner-sector的边框上颜色，如下，给每个div分别上了，上边框色和左右边框色 。
文章插图
现在看起来如下：
文章插图
注意看那个mix-blend-mode:overlay：它就是当两个颜色叠加一起，它会生成第三种颜色 。比如下面这个，我们让top和right合并起来，会合并出一个淡粉色，
文章插图
显示如下：
文章插图
如果需要这个CSS的详细说明，可以去看MDN 。接着，我们就可以给它加上动画了 。我们用到里CSS property, 这样每一个spinner-sector都会有不同的动画效果，并且有不同的速度，这样他们就会产生不同的重叠，出现不同的颜色 。
文章插图
最终效果如下，不错吧，简单么？
文章插图
这种方式挺灵活的，如果需要增加一种颜色，只要增加一个spinner-sector div，并进行相应的CSS配置就行了 。
如果你不需要那么多颜色，并且希望HTML简单点，那可以使用CSS伪类实现，它只可以实现两种颜色，因为只有::before, ::after可以使用，其实::before, ::after就是上面的spinner-sector, 它们的代码实现基本上是一样的
超简单的HTML：
文章插图
伪类CSS：
文章插图
效果如下：
文章插图
虽然只有两种颜色，但它也可以mix出来第三种颜色 。效果也还行
推荐阅读
- 你是精致的“键盘侠”吗？自己DIY机械键盘试试
- 跳槽|坑自己！贵阳男子找好下家，跳槽后上班被拒，负责人：形象不过关
- 敷完面膜揉出白色东西
- 开眼角对眼睛好吗
- 苹果|不知道你工作这么久，是否也有自己的想法并且很想去完善呢？
- 小孩夜里睡觉不踏实
- 医生教你如何快速辨别 怎么判断自己是低血糖
- 用自己手机查老婆和别人聊天(怎么远程监控老婆手机)
- 在自己手机查看老婆跟谁聊天 怎么远程查看别人微信
- 好用的补水面膜推荐口碑最好的补水面膜