溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

怎么用HTML/CSS制作動(dòng)態(tài)波浪形文本行

發(fā)布時(shí)間：2021-08-27 15:45:20 來(lái)源：億速云 閱讀：115 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容主要講解“怎么用HTML/CSS制作動(dòng)態(tài)波浪形文本行”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lá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">開(kāi)</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">來(lái)</span>
    <span style="--i:15">~</span>
    <span style="--i:16">~</span>
    <span style="--i:17">~</span>

</div>
</body>
</html>

效果如下：

怎么用HTML/CSS制作動(dòng)態(tài)波浪形文本行

大家可以直接復(fù)制以上代碼，在本地進(jìn)行運(yùn)行演示。

這里給大家介紹幾個(gè)關(guān)鍵的屬性：

  • text-transform 屬性控制文本的大小寫(xiě)。

  • animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性：

animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)。。    
animation-duration：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。    
animation-timing-function：規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。    
animation-delay：規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。    
animation-iteration-count：規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。    
animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

  • 通過(guò) @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫(huà)。

語(yǔ)法：@keyframes animationname {keyframes-selector {css-styles;}}
參數(shù)animationname必需：定義動(dòng)畫(huà)的名稱(chēng)。
參數(shù)keyframes-selector必需：動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
參數(shù)css-styles必需：一個(gè)或多個(gè)合法的 CSS 樣式屬性。

到此，相信大家對(duì)“怎么用HTML/CSS制作動(dòng)態(tài)波浪形文本行”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手