ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS を使用して虹色の縞模様のテキストの効果を実現する方法 (コード付き)
この記事の内容は、純粋な CSS を使用してレインボー ストライプ テキストの効果を実現する方法に関するものです (コード付き)。必要な友人が参考になれば幸いです。
https://github.com/comehope/front-end-daily-challenges
domを定義します。コンテナにはテキストが含まれており、4つが含まれます の data-text 属性値はテキストと同じです:
<p> web <span></span> <span></span> <span></span> <span></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); }
これで完了です。
関連する推奨事項:
純粋な CSS を使用してアイスキャンディーのアニメーション効果を実現する方法 (コード付き)純粋な CSS を使用して金属光沢のある 3 次元ボタンのアニメーション効果を実現する方法 (ソース コード付き)
以上が純粋な CSS を使用して虹色の縞模様のテキストの効果を実現する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。