Rumah > Artikel > hujung hadapan web > Buat baris teks beralun dinamik yang menarik dengan HTML/CSS

Buat baris teks beralun dinamik yang menarik dengan HTML/CSS

藏色散人asal: 2021-08-27 14:37:242313semak imbas

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>

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：规定是否应该轮流反向播放动画。

Animasi boleh dibuat melalui peraturan @keyframes.

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

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ajar anda langkah demi langkah cara menggunakan html css untuk mencapai kesan karusel (perkongsian kod)Artikel seterusnya：Ajar anda langkah demi langkah cara menggunakan html css untuk mencapai kesan karusel (perkongsian kod)

Artikel berkaitan

Lihat lagi