色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現文字波浪動畫

田志增1年前9瀏覽0評論

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屬性將其旋轉下來。最后使用關鍵幀動畫讓其無限循環旋轉,從而實現文字波浪動畫。

最終效果如下: