cari

Rumah  >  Artikel  >  hujung hadapan web  >  HTML/css untuk mencapai kesan pengisian cecair teks yang menarik

HTML/css untuk mencapai kesan pengisian cecair teks yang menarik

藏色散人
藏色散人asal
2021-08-30 14:26:192374semak imbas

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>

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 1a309583e26acea4f04ca31122d8c535

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!

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：Buat baris teks beralun dinamik yang menarik dengan HTML/CSSArtikel seterusnya：Buat baris teks beralun dinamik yang menarik dengan HTML/CSS

Artikel berkaitan

Lihat lagi