纯CSS实现五彩斑斓的黑色背景
背景
五彩斑斓的黑，应该算是程序员圈子流传较广的关于产品经理的一个笑话吧。然而我第一次看到的时候不是想笑，而是觉得这个黑应该是那种比较酷炫的黑，就是不知道那个产品经理想的黑和我想的黑是不是一个黑。
基础思路
黑色为主体的背景，加上一个色彩变幻的透明遮罩。
实现
黑色
首先黑色背景，这个很简单。那这里我介绍一个工作中较少用到的伪类“:root”.
这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，
:root表示<html>元素，除了优先级更高之外，与html选择器相同。
五彩斑斓
五彩斑斓的效果这里，我有几种不同的想法。这里我们先通过线性渐变实现其中一种。
翻一下线性渐变linear-gradient的文档，很容易掌握它的用法。
先简单配一下参数
:root {
background-image: linear-gradient(45deg, aqua, blue, purple, red, orange, yellow, green);
}
得到如下背景：
这个色彩丰富度基本满足我的想象，但仅仅是这样还是差了点感觉，我需要让它动起来，让色彩无缝变幻最好。
动起来 1
想让背景动起来，自然而然会想到动画。但是怎么让这个渐变色随动画改变呢？
于是我尝试把这个渐变颜色放入动画关键帧里面去,但是关键帧技术并不能帮忙补足两种背景图片切换中间的过度并产生流动的感觉，于是只好调整动画时长让人眼分别不出来真假流动效果。
于是有了以下代码和动画：
虽然动起来了，而且连贯性似乎也有保证，但代价是我的眼睛快被闪瞎qaq，而且这个效果，一言难尽。
动起来 2
我想要的效果，是颜色能够缓慢而自然地过渡，类似这种:
而不是像第一个那样感觉自己进了迪厅。
那有没有一种办法既保留色彩的渐变，又能让它‘流动’起来呢？有的。
动起来 3
简单查了一下，我们可以通过放大背景图片，然后动画控制背景图片展示的位置来实现类似的效果。
这里有两个注意的点： 1. 如果加上倾斜角度，那起始和终止部分的动画无法完美对齐。所以只好改成90度或0度。 2. 线性渐变里每个颜色我都写了两遍，是为了让颜色宽度一致且首尾能完美过渡。
到这里，五彩斑斓基本就达到我的要求了，接下来需要把五彩斑斓和黑色结合起来。
五彩斑斓的黑
到了这一步，无论是把黑色蒙在五彩斑斓上面，给个较大的不透明度；还是把五彩斑斓蒙在黑色上面，给个较小的不透明度，效果都差不多。唯一的问题是，黑色是主体被突出了，辛苦弄出来的五彩斑斓看不太出来。
所以我们还需要开个口子，让五彩斑斓也能展示出来，同时不影响主体的黑色。
最好还能让这个五彩斑斓有一些质感。
一番调整，最后的成品就是这样啦：
后记
你们觉得这算不算五彩斑斓的黑呢，欢迎讨论。
PS：有些地方本来想用录屏转gif 的，但转出来的gif 太大辣，小伙伴们有好用的工具可以推荐一下。
转载自:https://juejin.cn/post/7142550658468560909