HTML彩色波浪藝術字廣泛應用于設計和排版領域。在網頁設計中,藝術字是設計師提升頁面美觀度和可讀性的必備元素之一。為此,我們推薦一種簡單易懂的HTML彩色波浪藝術字代碼,希望能夠幫助大家創作更加出色的藝術字。
<style type="text/css"> .wave-text { color: #fff; font-size: 100px; font-family: Arial, sans-serif; position: relative; } .wave-text:before, .wave-text:after { content: attr(data-text); position: absolute; top: 0; left: 0; z-index: -1; } .wave-text:before { text-shadow: -2px 0 limegreen; animation: animate-text 2s linear infinite; } .wave-text:after { text-shadow: 2px 0 cyan; animation: animate-text 2s linear infinite; animation-delay: 1s; } @keyframes animate-text { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> <h1 class="wave-text" data-text="HELLO THERE">HELLO THERE</h1>
上述代碼中的.text-wave類定義了部分通用樣式,包括字體大小和顏色。通過偽元素:before和:after,我們實現了兩種不同顏色的波浪形狀,并通過動畫效果讓它們流動起來。線性動畫animate-text的作用是在2秒鐘內將文本移動左側100%、向right移動100%,再向左側平移100%,使波浪形狀循環動畫。
根據字需要修改類名、文本和顏色即可。代碼簡單易懂,用法靈活。我們希望本篇文章能夠對大家的工作或學習帶來一些幫助。