欢迎大家来到IT世界,在知识的湖畔探索吧!
现代浏览器越来越标准化了，这样的好处就是很多好用的CSS可以跨浏览器运行，效果很不错。大家看下面两个loading样式，实现起来也非常简单。
首先看下右边那个，它其实只有三种颜色，你看到多余三种颜色，是因为当两种颜色重叠到一起的时候，它会叠加出第三种颜色，这是mix-blend-mode: overlay的结果。现在我们来详细说一下，
首先是HTML:
由于有三种颜色，所以HTML结构也非常简单。
每个spinner-sector代表一个颜色，现在我们加入一些基本样式：
现在显示结果如下：
加入红色背景，是为了让大家看清楚现在它长什么样。接下来，我们去掉红色背景，给每个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出来第三种颜色。效果也还行
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/92843.html
