用HTML/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>
    

效果如下：

大家可以直接复制以上代码，在本地进行运行演示。

这里给大家介绍几个关键的属性：

• 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制作有趣的动态波浪形文本行的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！