如何使用純CSS實現彩虹條紋文字的效果（附代碼）

本篇文章給大家帶來的內容是關於如何使用純CSS實現彩虹條紋文字的效果（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

最後，把原始文本設定為透明色：

.rainbow {    color: transparent;}

大功告成！