html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）

本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含文本，并且包含4个 用于特效， 的 data-text 属性值为与文本相同：

web

居中显示：html, body {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

background: black;

}

定义文本样式：.rainbow {

color: white;

font-size: 300px;

text-transform: uppercase;

font-family: sans-serif;

font-weight: bold;

line-height: 1em;

position: relative;

}

用伪元素增加图层，形成彩虹效果：.rainbow span::bef