Buat baris teks beralun dinamik yang menarik dengan HTML/CSS-html tutorial-php.cn

Buat baris teks beralun dinamik yang menarik dengan HTML/CSS

藏色散人

Lepaskan： 2021-08-27 14:37:24

asal

2349 orang telah melayarinya

Dalam artikel sebelumnya "Sangat praktikal! CSS melaksanakan kesan dinamik menekan apabila butang diklik"Di mana kami memperkenalkan cara menggunakan CSS untuk mencapai kesan dinamik menekan apabila butang diklik. Rakan yang memerlukan boleh pergi dan belajar mengenainya~

Artikel ini akan menunjukkan kepada anda cara menggunakan HTML/CSS untuk mencipta kesan baris teks beralun dinamik yang menarik!

Mari kita lihat contoh kod lengkap di bawah:

<!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>

Salin selepas log masuk

Kesannya adalah seperti berikut:

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

Anda boleh menyalin Kod di atas secara langsung, jalankan demonstrasi secara tempatan.

Berikut ialah beberapa atribut utama:

Atribut transformasi teks mengawal kes teks.
Atribut animasi ialah atribut singkatan:

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

Salin selepas log masuk

Animasi boleh dibuat melalui peraturan @keyframes.

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

Salin selepas log masuk

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "tutorial video css"!

Atas ialah kandungan terperinci Buat baris teks beralun dinamik yang menarik dengan HTML/CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!