现代浏览器越来越标准化了,这样的好处就是很多好用的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出来第三种颜色。效果也还行