HTML/css untuk mencapai kesan pengisian cecair teks yang menarik-html tutorial-php.cn

HTML/css untuk mencapai kesan pengisian cecair teks yang menarik

藏色散人

Lepaskan： 2021-08-30 14:26:19

asal

2367 orang telah melayarinya

Dalam artikel sebelumnya " Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS? 》Memperkenalkan anda kepada kesan melaraskan jejari putaran secara dinamik menggunakan CSS Rakan yang berminat boleh mempelajarinya~

Artikel ini akan membawa anda kesan pelaksanaan yang sangat menarik tajuk? Adakah anda mempunyai sebarang idea tentang "kesan pengisian cecair teks" yang dinyatakan di atas?

Pertama sekali, mari kita lihat bagaimana kesan ini, seperti yang ditunjukkan dalam rajah di bawah:

GIF 2021-8-30 星期一下午 2-11-27.gif

Sekarang mari kita muat naik terus Kod HTML/css lengkap:

Nota: Animasi teks isian cecair boleh dilakukan menggunakan CSS::before selector. Kami akan menggunakan bingkai utama untuk menetapkan ketinggian setiap bingkai animasi.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 200px 0;
            padding: 0;
            font-size: 80px;
            position: relative;
            color: #45b1ff;
        }

        h1:before {
            content: "PHP中文网";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color:white;
            overflow: hidden;
            animation: animate 6s infinite;
        }

        @keyframes animate {
            0% {
                height: 25%;
            }
            25% {
                height: 50%;
            }
            50% {
                height: 65%;
            }
            75% {
                height: 40%;
            }
            100% {
                height: 25%;
            }
        }
    </style>

</head>

<body>
<center>
    <h1>PHP中文网</h1>
</center>
</body>

</html>

Salin selepas log masuk

Kesan menjalankan kod ini adalah seperti yang ditunjukkan dalam gambar di atas.

Untuk mencapai kesan ini, anda perlu biasa dengan peraturan :before selector dan @keyframes dalam CSS.

:sebelum pemilih:

:sebelum pemilih menyisipkan kandungan sebelum kandungan elemen yang dipilih Anda ingin menggunakan atribut kandungan untuk menentukan kandungan yang hendak disisipkan.

Nota: Untuk :sebelum dalam IE8 dan versi terdahulu, anda mesti mengisytiharkan

peraturan @keyframes:

Gunakan @ Dengan keyframes, anda boleh mencipta animasi dengan menukar tetapan gaya CSS secara beransur-ansur kepada yang lain. Anda boleh menukar tetapan gaya CSS beberapa kali semasa animasi. Tentukan apabila perubahan berlaku menggunakan %, atau kata kunci "dari" dan "kepada", yang sama dengan 0% hingga 100%. 0% ialah apabila animasi bermula, 100% ialah apabila animasi selesai. Untuk sokongan penyemak imbas terbaik, kami harus sentiasa menentukan pemilih untuk 0% dan 100%.

Nota: Gunakan atribut animasi untuk mengawal penampilan animasi, dan juga gunakan pemilih untuk mengikat animasi.

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Mengalu-alukan semua orang untuk mempelajari "tutorial video css" dan "Tutorial video HTML"!

Atas ialah kandungan terperinci HTML/css untuk mencapai kesan pengisian cecair teks yang menarik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!