22.纯 CSS 创作出美丽的彩虹条纹文字
生活随笔
收集整理的這篇文章主要介紹了
22.纯 CSS 创作出美丽的彩虹条纹文字
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
22.純 CSS 創作出美麗的彩虹條紋文字
原文地址：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; }?
posted on 2019-01-14 16:32? 人生與戲 閱讀( ...) 評論( ...) 編輯 收藏轉載于:https://www.cnblogs.com/FlyingLiao/p/10267593.html
總結
以上是生活随笔為你收集整理的22.纯 CSS 创作出美丽的彩虹条纹文字的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 展会中，你做得够好么？
- 下一篇： Android开发——查询/杀死手机里正