Petua cepat: Cara menghidupkan kecerunan teks dan corak dalam CSS

Dalam hujung cepat ini, kami akan menunjukkan betapa mudahnya untuk menghidupkan kecerunan latar belakang dengan CSS.

Dalam artikel baru -baru ini, kami menunjukkan cara menetapkan kecerunan latar belakang pada teks. Demo codepen di bawah menunjukkan hasilnya.

Lihat pen

Teks dengan kecerunan kiri ke kanan oleh SitePoint (@SitePoint)
pada codepen.

Pastikan untuk membaca artikel itu jika anda tidak pasti bagaimana kami mendapat hasil ini, seperti yang akan kami bina pada contoh ini di bawah.

Demi demo ini, mari kita tambahkan beberapa warna tambahan untuk latar belakang kecerunan kita:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Jika kita mematikan klip latar belakang: Teks dan warna teks: Telus untuk seketika, kita mendapat gambaran yang lebih baik tentang bagaimana kecerunan kita mengisi kotak kandungan teks.

Lihat pen

Teks dengan Kecerunan Latar Belakang Animasi: 1 oleh SitePoint (@SitePoint)
pada codepen.

mari kita pergi melalui langkah -langkah menghidupkan kecerunan latar belakang kita.

Langkah 1: Melaraskan saiz latar belakang

Untuk menghidupkan latar belakang kecerunan kita, kita perlu menjadikannya lebih besar daripada kotak kandungan teks supaya kita tidak dapat melihat semuanya sekaligus. Kita boleh melakukannya dengan harta saiz latar belakang yang berguna. (Anda boleh membaca semua tentang saiz latar belakang di sini.)

Saya akan menetapkan lebar kecerunan latar belakang kami hingga tiga kali lebar elemen tajuk kami:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

Sekarang, hanya satu pertiga daripada latar belakang kecerunan akan dapat dilihat pada satu -satu masa, seperti yang dilihat di bawah.

Lihat pen

Teks dengan Kecerunan Latar Belakang Animasi: Langkah 2 oleh SitePoint (@SitePoint)
pada codepen.

Langkah 2: Menetapkan Animasi

Seterusnya, kami akan menubuhkan animasi yang akan memindahkan latar belakang supaya kami akan melihat bahagian -bahagian yang berlainan dari masa ke masa.

kita boleh menyediakan peraturan animasi yang mudah seperti:

<span>h1 {
</span>  <span>animation: gradientAnimation 8s linear infinite;
</span><span>}
</span>

yang akan menggerakkan latar belakang ke belakang dan sebagainya sekali setiap 16 saat.

Seterusnya, kami akan menyediakan pernyataan @KeyFrames:

<span><span>@keyframes gradientAnimation</span> {
</span>  <span>0% {
</span>    <span>background-position: 0;
</span>  <span>}
</span>  <span>to {
</span>    <span>background-position: 100%;
</span>  <span>}
</span><span>}
</span>

pernyataan @keyframes mudah ini akan memindahkan latar belakang kami dari kiri atas ke kanan bawah setiap lapan saat.

Di pena di bawah, kita sekali lagi melumpuhkan klip latar belakang: Teks dan warna: telus supaya kita dapat melihat apa yang berlaku di latar belakang.

Lihat pen
Teks dengan Kecerunan Latar Belakang Animasi: Langkah 3 oleh SitePoint (@SitePoint)
pada codepen.

Sebaik sahaja kita dapat mengaktifkan semula klip latar: teks dan warna: telus, kita melihat produk siap.

Lihat pen
Teks dengan Kecerunan Latar Belakang Animasi: Langkah 4 (Akhir) oleh SitePoint (@SitePoint)
pada codepen.

Pretty Cool!

animasi imej latar belakang

Dalam artikel kami untuk menambah kesan kecerunan dan corak ke teks, kami juga menggunakan imej latar belakang bunga. (Lihat pena untuk itu di sini.)

mari kita pergi ke animasi latar belakang itu juga. Kami akan melakukannya sedikit berbeza, kerana kami tidak mahu memutarbelitkan imej latar belakang.

mari kita keluarkan saiz latar belakang: mengandungi dari demo asal dan tidak menetapkan saiz latar belakang sama sekali. Itu meninggalkan kita dengan ini:

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

Hasilnya ditunjukkan dalam demo Codepen di bawah.

Lihat pen
Menghidupkan imej latar belakang pada teks oleh SitePoint (@SitePoint)
pada codepen.

Cuba matikan klip latar belakang: Teks dan warna teks: Telus untuk seketika jika anda ingin melihat apa yang berlaku di latar belakang.

imej latar belakang kami diulang secara lalai, yang tidak kelihatan terlalu buruk untuk imej tertentu ini. . Kemudian gunakan saiz latar belakang untuk menjadikan imej lebih besar, seperti yang kita lakukan dengan latar belakang kecerunan di atas. Contohnya:

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

inilah kesan melakukan itu pada demo bunga kita.

Lihat pen
Menghidupkan imej latar belakang pada teks: Step1a (Eksperimen Saiz Latar Belakang) oleh SitePoint (@SitePoint)
pada codepen.

Kesimpulan

kita boleh melakukan lebih banyak animasi yang luar biasa yang ini, tetapi matlamatnya adalah untuk memastikan ia mudah di sini. Anda boleh menggali lebih mendalam ke dalam kerangka kunci dan animasi CSS dalam cara memulakan animasi CSS. Anda juga boleh bermain -main dengan masa animasi, sudut kecerunan dan sebagainya.

Seperti yang disebutkan dalam artikel sebelumnya, bersenang -senang dengan ini tetapi jangan pergi ke laut, kerana terlalu banyak animasi semacam ini boleh menjadi menjengkelkan. Latar belakang animasi yang halus pada tajuk mungkin hanya menambah sentuhan minat atau tipu muslihat yang anda perlukan untuk menjaga penonton anda terlibat.

Atas ialah kandungan terperinci Petua cepat: Cara menghidupkan kecerunan teks dan corak dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!