CSS中可以實現很多酷炫的動畫效果,其中之一就是文字波浪動畫。通過CSS的一些屬性和關鍵幀動畫,我們可以輕松實現這種效果。
首先,我們需要在HTML中建立一個包含文字的容器,例如:
<div class="wave">Hello World!</div>
然后,在CSS文件中,我們需要設置這個容器的樣式,并創建關鍵幀動畫。
.wave { display: inline-block; position: relative; font-size: 40px; font-weight: bold; color: #333; text-transform: uppercase; } .wave::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background-color: #333; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform-origin: left bottom; animation: wave 2s infinite linear; } @keyframes wave { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } }
以上代碼中,我們首先設置了一個類名為wave的容器的樣式,其中包含了要顯示的文字,字體大小和樣式。隨后,我們使用CSS ::before偽元素來創建一個與文字容器相同大小的背景色盒子,并將其扭曲成波浪形狀,然后使用transform-origin屬性將其旋轉下來。最后使用關鍵幀動畫讓其無限循環旋轉,從而實現文字波浪動畫。
最終效果如下:
上一篇div 中使用href
下一篇css實現圖片循環滾動