站長(zhǎng)資訊網(wǎng)在上一篇《很實(shí)用！CSS實(shí)現(xiàn)在單擊按鈕時(shí)顯示按下的動(dòng)態(tài)效果》中大家介紹了怎么使用CSS實(shí)現(xiàn)在單擊按鈕時(shí)顯示按下的動(dòng)態(tài)效果，有需要的朋友可以去學(xué)習(xí)了解一下~
本文將帶大家用HTML/CSS制作一種有趣的動(dòng)態(tài)波浪形文本行效果！
下面我們直接看完整的代碼示例：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgb(74, 152, 255); } .wavy { position: relative; } .wavy span { position: relative; display: inline-block; color: #fff; font-size: 2em; text-transform: uppercase; animation: animate 2s ease-in-out infinite; animation-delay: calc(0.1s * var(--i)); } @keyframes animate { 0% { transform: translateY(0px); } 20% { transform: translateY(-20px); } 40%, 100% { transform: translateY(0px); } } </style> </head> <body> <div class="wavy"> <span style="--i:1">P</span> <span style="--i:2">H</span> <span style="--i:3">P</span> <span style="--i:4">中</span> <span style="--i:5">文</span> <span style="--i:6">網(wǎng)</span> <span style="--i:7">開</span> <span style="--i:8">班</span> <span style="--i:9">啦</span> <span style="--i:10">~</span> <span style="--i:11">快</span> <span style="--i:12">學(xué)</span> <span style="--i:13">起</span> <span style="--i:14">來</span> <span style="--i:15">~</span> <span style="--i:16">~</span> <span style="--i:17">~</span> </div> </body> </html>
效果如下：
大家可以直接復(fù)制以上代碼，在本地進(jìn)行運(yùn)行演示。
這里給大家介紹幾個(gè)關(guān)鍵的屬性：
-
text-transform 屬性控制文本的大小寫。
-
animation 屬性是一個(gè)簡(jiǎn)寫屬性：
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。 animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 animation-timing-function：規(guī)定動(dòng)畫的速度曲線。 animation-delay：規(guī)定在動(dòng)畫開始之前的延遲。 animation-iteration-count：規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。 animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
-
通過 @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。
語法：@keyframes animationname {keyframes-selector {css-styles;}} 參數(shù)animationname必需：定義動(dòng)畫的名稱。 參數(shù)keyframes-selector必需：動(dòng)畫時(shí)長(zhǎng)的百分比。 合法的值： 0-100% from（與 0% 相同） to（與 100% 相同） 參數(shù)css-styles必需：一個(gè)或多個(gè)合法的 CSS 樣式屬性。
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
