css实现漂亮的彩虹渐变文本效果_css制作彩虹效果-CSDN博客

这段代码的效果是，为h1标签设置一个彩虹渐变的背景，并使文本颜色透明，从而实现彩虹渐变的文本效果。具体效果如下：

具体实现：

定义一个名为--rainbow-gradient的CSS变量，用于存储一个渐变背景。这个渐变背景是一个线性渐变，从左到右分别是不同的颜色，角度为-90度。


:root{
            --rainbow-gradient:
                    linear-gradient(-90deg,
                    #602ce5 0,
                    #2ce597 30%,
                    #e7bb18 50%,
                    #ff7657 70%,
                    #45c1ee 90%,
                    #2ce597 100%);
        }

为类和h1标签设置样式。这里使用了刚刚定义的 --rainbow-gradient 变量作为背景图片，并设置了一些其他样式属性。


h1 {
    background-image: var(--rainbow-gradient, #fff);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    filter: drop-shadow(0 0 2rem #000);
    text-shadow: none !important;
}

解释一下这段CSS：

background-image：使用 --rainbow-gradient 变量作为背景图片，如果该变量未定义，则使用白色（#fff）作为背景。
background-size：设置背景图片的尺寸为 100%。
background-repeat：设置背景图片重复显示。
-webkit-background-clip 和 -moz-background-clip：这两个属性用于设置背景图片的裁剪区域。这里设置为 text，表示只显示在文本区域的背景图片。
-webkit-text-fill-color 和 -moz-text-fill-color：这两个属性用于设置文本的填充颜色。这里设置为 transparent，表示文本颜色透明，这样就可以看到背景图片的颜色。
filter：设置一个阴影效果，颜色为黑色（#000），模糊半径为 2rem。
text-shadow：设置文本阴影为无，!important 表示这个属性的优先级最高。

这段代码的效果是，为 h1 标签设置一个彩虹渐变的背景，并使文本颜色透明，从而实现彩虹渐变的文本效果。同时，还添加了一个阴影效果，赶快试试吧，是不是很好看？