Cara menggunakan CSS untuk mencipta kesan bar pemberitahuan teks tatal lancar

Cara menggunakan CSS untuk mencipta kesan bar pemberitahuan teks skrol lancar

Bar pemberitahuan teks skrol lancar ialah ciri biasa pada laman web Kesan ini boleh dicapai melalui CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencipta bar pemberitahuan teks tatal yang lancar dan memberikan contoh kod khusus.

Untuk mencapai kesan bar pemberitahuan teks skrol yang lancar, anda memerlukan bekas untuk membungkus teks terlebih dahulu dan menetapkan lebar, tinggi dan warna latar belakang bekas itu. Sebagai contoh, kita boleh menggunakan elemen div dan memberikannya nama kelas seperti ini:

<div class="scrolling-text-container">
    文字通知栏内容
</div>

Seterusnya, kita perlu menentukan gaya CSS untuk mengawal penampilan dan tingkah laku bar pemberitahuan teks. Mula-mula, kami akan menambah beberapa penggayaan asas pada bekas, seperti yang ditunjukkan di bawah:

.scrolling-text-container {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}

Kod di atas akan menjadikan lebar bekas 100%, ketinggian 30 piksel dan menetapkan warna latar belakang kepada kelabu. Pada masa yang sama, kami akan menetapkan atribut limpahan kepada "tersembunyi" untuk menyembunyikan kandungan di luar bar pemberitahuan teks, memastikan bahawa hanya bahagian bekas yang boleh dilihat dipaparkan.

Seterusnya, kita perlu membalut kandungan bar pemberitahuan teks dalam elemen span dan tetapkan atribut gaya utama untuknya, seperti yang ditunjukkan di bawah:

<div class="scrolling-text-container">
    <span class="scrolling-text">文字通知栏内容</span>
</div>

.scrolling-text {
    position: relative;
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

Dalam perkara di atas Dalam kod, kami menetapkan nama kelas untuk elemen span dan mentakrifkan atribut gaya yang diperlukan. Antaranya, kami menetapkan atribut kedudukan kepada "relatif" untuk mengekalkan kedudukan relatif semasa animasi tatal. Kami juga menetapkan sifat paparan kepada "blok sebaris" supaya elemen span dipaparkan dalam satu baris dan memastikan lebar bekas tidak berubah.

Kami juga mentakrifkan animasi yang dipanggil "scroll-left" yang akan membuat teks menatal secara beransur-ansur dari kanan ke kiri. Animasi ini menggunakan kesan animasi linear dan menetapkan tempoh selama 10 saat. Untuk mencapai gelung tak terhingga, kami menetapkan sifat kiraan lelaran animasi kepada "tak terhingga". Kod animasi khusus adalah seperti berikut:

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

Peraturan @keyframes dalam kod di atas mentakrifkan dua bingkai utama animasi skrol ke kiri. Pada 0%, kami menetapkan kedudukan teks ke kedudukan asal, iaitu, tanpa sebarang offset. Pada 100%, kami mengimbangi kedudukan teks 100% ke kiri, supaya ia hilang sepenuhnya ke kiri bekas dan muncul semula dari kanan.

Akhir sekali, kami perlu menambah beberapa gaya tambahan pada bar pemberitahuan teks untuk menyesuaikan dengan lebih baik dengan reka bentuk dan reka letak halaman web. Anda boleh menyesuaikannya mengikut keperluan anda. Sebagai contoh, anda boleh menetapkan warna, fon, saiz, dsb. teks, dan anda juga boleh menetapkan jidar, jarak dsb. teks. Berikut ialah contoh coretan kod untuk menyesuaikan gaya bar pemberitahuan teks:

.scrolling-text {
    ...
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    letter-spacing: 1px;
}

Coretan kod di atas menetapkan warna fon untuk bar pemberitahuan teks kepada hitam dan keluarga fon ialah Arial dan sans Fon sandaran -serif , dengan saiz fon 16 piksel, margin 5 piksel dan jarak ditetapkan kepada 1 piksel.

Dengan contoh kod HTML dan CSS di atas, anda boleh mencapai kesan bar pemberitahuan teks tatal lancar dengan mudah. Hanya buat gaya yang sesuai mengikut keperluan anda. Dengan cara ini, anda boleh menggunakan CSS untuk melaksanakan bar pemberitahuan teks yang dinamik dan menarik dalam halaman web anda untuk menarik perhatian pengguna dan memberikan mereka maklumat penting.

Saya harap artikel ini dapat membantu anda memahami kesan CSS untuk mencipta bar pemberitahuan teks skrol yang lancar. Saya harap anda boleh menggunakan CSS untuk mencipta bar pemberitahuan teks yang menarik!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta kesan bar pemberitahuan teks tatal lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!