纯 CSS 制作的彩虹条纹文字

article/2025/9/28 16:24:26

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/ELpRxj点击预览

可交互视频教程

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/czrWDfZ

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

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

代码解读

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

<p class="rainbow">web<span data-text="web"></span><span data-text="web"></span><span data-text="web"></span><span data-text="web"></span>
</p>

居中显示：

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);
}