本篇文章给大家带来的内容是关于如何使用纯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::before,

.rainbow span::after {

content: attr(data-text);

position: absolute;

top: 0;

left: 0;

overflow: hidden;

}

.rainbow span:nth-child(1)::before {

color: orchid;

z-index: 1;

height: calc(100% - 10% * 1);

}

.rainbow span:nth-child(1)::after {

color: mediumpurple;

z-index: 2;

height: calc(100% - 10% * 2);

}

.rainbow span:nth-child(2)::before {

color: deepskyblue;

z-index: 3;

height: calc(100% - 10% * 3);

}

.rainbow span:nth-child(2)::after {

color: cyan;

z-index: 4;

height: calc(100% - 10% * 4);

}

.rainbow span:nth-child(3)::before {

color: mediumspringgreen;

z-index: 5;

height: calc(100% - 10% * 5);

}

.rainbow span:nth-child(3)::after {

color: yellow;

z-index: 6;

height: calc(100% - 10% * 6);

}

.rainbow span:nth-child(4)::before {

color: gold;

z-index: 7;

height: calc(100% - 10% * 7);

}

.rainbow span:nth-child(4)::after {

color: tomato;

z-index: 8;

height: calc(100% - 10% * 8);

}

增加动画效果：.rainbow span::before,

.rainbow span::after {

animation: animate 0.8s infinite alternate;

filter: opacity(0);

}

@keyframes animate {

from {

filter: opacity(0);

}

to {

filter: opacity(1);

}

}

为图层设置延时，增强动感：.rainbow span:nth-child(1)::before {

animation-delay: calc(0.8s - 0.1s * 1);

}

.rainbow span:nth-child(1)::after {

animation-delay: calc(0.8s - 0.1s * 2);

}

.rainbow span:nth-child(2)::before {

animation-delay: calc(0.8s - 0.1s * 3);

}

.rainbow span:nth-child(2)::after {

animation-delay: calc(0.8s - 0.1s * 4);

}

.rainbow span:nth-child(3)::before {

animation-delay: calc(0.8s - 0.1s * 5);

}

.rainbow span:nth-child(3)::after {

animation-delay: calc(0.8s - 0.1s * 6);

}

.rainbow span:nth-child(4)::before {

animation-delay: calc(0.8s - 0.1s * 7);

}

.rainbow span:nth-child(4)::after {

animation-delay: calc(0.8s - 0.1s * 8);

}

最后，把原始文本设置为透明色：.rainbow {

color: transparent;

}

大功告成！

相关推荐：如何使用纯CSS实现带有金属光泽的立体按钮的动画效果(附源码)