css3渐变背景色

傷城~ 2022-01-23 12:51 394阅读 0赞

> 好久没写关于css的博客了，因为一个app的需要，自己要做一个动态的渐变背景块，所以算是重新学习了渐变类的css。

*  首先说一下这个背景：vue项目中，考虑到兼容性，特意写了兼容性代码（这在我的代码里面比较少见）
 *  原理：自定义动画，从5%以5为单位到100%，20组代码块，其实说实话代码量不小，还有一种思想，利用math方法，随机颜色，然后动态加上去，大家可以试试，我没找到bug，但出不来。所以换了个方法。然后像我要写21步来完成动画的话，就需要20个颜色，然后每次颜色顺序瞬移一位，利用视觉暂留效应，实现动态变色。

`animation:firstdemo 2s linear -1ms infinite ;`//定义动画类型和名字

@keyframes myfirst {
                    0% {
                        background: -moz-linear-gradient(left, rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136), rgb(255, 122, 122));
                        background: -webkit-linear-gradient(left, rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136), rgb(255, 122, 122));
                        background: -o-linear-gradient(left, rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136), rgb(255, 122, 122));
                        background: linear-gradient(left, rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136), rgb(255, 122, 122));
                    }
                    5% {
                        background: -moz-linear-gradient(left, rgb(255, 122, 122), rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136));
                        background: -webkit-linear-gradient(left, rgb(255, 122, 122), rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136));
                        background: -o-linear-gradient(left, rgb(255, 122, 122), rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136));
                        background: linear-gradient(left, rgb(255, 122, 122), rgb(250, 73, 73), rgb(250, 144, 73),rgb(232, 250, 73),rgb(158, 250, 73),rgb(73, 250, 102),rgb(73, 250, 206),rgb(73, 238, 250),rgb(73, 179, 250),rgb(73, 100, 250),rgb(141, 73, 250),rgb(179, 73, 250),rgb(220, 73, 250), rgb(250, 73, 212), rgb(250, 73, 176), rgb(250, 73, 156), rgb(250, 73, 141), rgb(255, 102, 148), rgb(241, 113, 124), rgb(255, 118, 136));
                    }
                }
                //这只是前面的一部分，但是所有的代码都是瞬移的，所以只是复制粘贴就好

##### 全部写完后的效果，如下： #####

![在这里插入图片描述][20190603213900546.gif]  
END

[20190603213900546.gif]: /images/20220123/c90266588a864398beaf96446b35e535.png