css实现漂亮的彩虹渐变文本效果

作者:J.sky · 发表于:
2023-05-27T07:08:32.000000Z
· 更新于:
2023-08-13T22:54:57.603618Z
· Tag: CSS

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

在这里插入图片描述

具体实现:

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

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

  1. 为类和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 标签设置一个彩虹渐变的背景,并使文本颜色透明,从而实现彩虹渐变的文本效果。同时,还添加了一个阴影效果,赶快试试吧,是不是很好看?