在網頁設計中,字體、文本是頁面的重要部分,而通過合適的css樣式,我們可以實現更加炫酷的效果,比如大波折線。
.text { font-family: Arial, sans-serif; font-size: 36px; position: relative; display: inline-block; padding-bottom: 10px; } .text:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 2px; background: black; } .text:after { content: ''; position: absolute; bottom: 0; width: 100%; height: 2px; background: black; transform: skewX(45deg); transform-origin: top left; }
上述代碼實現了一個簡單的大波折線效果,通過:before和:after偽元素分別實現了一條水平線和一條傾斜線,并使用absolute定位貼著文本底部。
如果需要讓文本下的折線更加好看,可以對水平線和傾斜線進行如下調整:
.text:before, .text:after { content: ''; position: absolute; bottom: 0; width: 100%; height: 2px; background: black; animation: wave 1s cubic-bezier(0.36,0.45,0.63,0.53) infinite; } .text:after { left: -10%; animation-delay: 0.2s; } @keyframes wave { 0% { transform: none; } 50% { transform: translateX(-25%); } 100% { transform: none; } }
上述代碼添加了一個波浪動畫,通過一個無限循環的keyframes定義,讓折線更加生動。
總的來說,使用css裝飾字體文本大波折線是一種非常簡單又炫酷的效果,如果需要的話,可以加入更多的調整和調色。
上一篇css控制文字的位置
下一篇css要求30位長度限制