原文地址：https://segmentfault.com/a/1190000014858628
感想： 利用四个span的::before 和 ::after创出多个WEB，给其颜色，绝对定位，再利用z-index: n；突出显示的优先级。
HTML代码：
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <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> </body> </html>
CSS代码：
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: 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; }