用HTML/CSS製作有趣的動態波浪形文字行-html教學-PHP中文網

用HTML/CSS製作有趣的動態波浪形文字行

藏色散人

發布： 2021-08-27 14:37:24

原創

2318 人瀏覽過

在上一篇《很實用！ CSS實現在點擊按鈕時顯示按下的動態效果》中大家介紹了怎麼使用CSS實現在點擊按鈕時顯示按下的動態效果，有需要的朋友可以去學習了解一下~

本文將帶大家用HTML/CSS製作有趣的動態波浪形文字行效果！

下面我們直接看完整的程式碼範例：

<!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">网</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">学</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>

登入後複製

效果如下：

GIF 2021-8-27 星期五下午 2-30-58.gif

大家可以直接複製以上程式碼，在本地進行運行演示。

這裡要為大家介紹幾個關鍵的屬性：

text-transform 屬性控製文字的大小寫。
animation 屬性是一個簡寫屬性：

animation-name：规定需要绑定到选择器的 keyframe 名称。。    
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。    
animation-timing-function：规定动画的速度曲线。    
animation-delay：规定在动画开始之前的延迟。    
animation-iteration-count：规定动画应该播放的次数。    
animation-direction：规定是否应该轮流反向播放动画。

登入後複製

透過 @keyframes 規則，能夠創造動畫。

语法：@keyframes animationname {keyframes-selector {css-styles;}}
参数animationname必需：定义动画的名称。
参数keyframes-selector必需：动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
参数css-styles必需：一个或多个合法的 CSS 样式属性。

登入後複製

PHP中文網路平台有非常多的影片教學資源，歡迎大家學習《css影片教學》！

以上是用HTML/CSS製作有趣的動態波浪形文字行的詳細內容。更多資訊請關注PHP中文網其他相關文章！