Kandungan
- 01. Kesan teks rollover
- 02. Buat CSS
- 03. Letakkan perkataan
- 04. Berulang-ulang
- 05. Melayang ke bawah
- 06. Automatik untuk rakyat
- 07. Tambah kelas gantian
Rollover link adalah cara terbaik untuk menarik perhatian pengguna, terutamanya jika mereka melakukan sesuatu yang tidak biasa atau asli. Anak Tengah mempunyai kesan yang luar biasa, yang jarang dilihat di tempat lain, yang menangkap setiap huruf dan memisahkannya dengan animasi, yang berlaku ketika pengunjung melayang ke atas kata tersebut. Animasi ini membantu menyampaikan watak suka bermain jenama sandwic.
Dalam artikel ini, kami menunjukkan kepada anda cara mencipta semula kesan di laman web anda. Untuk lebih banyak inspirasi, lihat panduan kami untuk contoh animasi CSS terbaik (dengan arahan mengenai cara mengkodkannya). Untuk sesuatu yang sedikit berbeza, cubalah pembangun laman web teratas atau pilihan penyimpanan awan terbaik kami. Dan jika anda menjadikan laman web anda lebih kompleks, pastikan hosting web anda tepat pada waktunya.
01. Kesan teks rollover
Salah satu kesan teks yang hebat di laman web Kanak-kanak Tengah adalah kesan penggantian pada menu, di mana huruf-huruf itu berpisah pada teks dan berputar sedikit. Mulakan ini dengan beberapa tag HTML ringkas.
div> div> Sarapan / div> / div>
02. Buat CSS
Gunakan fail CSS atau tag gaya yang berasingan untuk menambahkan peraturan CSS berikut dan buat halaman memenuhi ukuran penuh penyemak imbas dengan memastikan badan dan pembungkus mengambil ketinggian penuh yang tersedia.
badan {lebar: 100%; tinggi: 100%; margin: 0; pembalut: 0; } .wrapper {display: grid; tinggi: 100%; }
03. Letakkan perkataan
The perkataan kelas memusatkan perkataan di petak. Sebarang teks yang diberi perkataan kelas boleh menggunakan ini. The naik kelas akan digunakan untuk setiap huruf lain dan ini akan bergerak ke atas.
.word {font-size: 3em; margin: auto automatik; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) putar (0deg); peralihan: semua 0.5s kemudahan dalam; }
04. Berulang-ulang
Sekarang turun kelas berkongsi tetapan yang sangat serupa dengan naik tetapi hover menunjukkan pergerakan ke atas untuk naik bergolek. Ke atas juga diputar sedikit untuk meningkatkan penampilan.
.word .down {display: sebaris-blok; ubah: translate3d (0px, 0px, 0px) putar (0deg); peralihan: semua kemudahan 0.5s dalam-keluar; } .word: hover .up {transform: translate3d (0px, -8px, 0px) putar (12deg); warna: # 058b05}
05. Melayang ke bawah
Apabila pengguna mengarahkan kursor ke atas teks, kelas bawah menggerakkan teks ke bawah. Kemudian dalam JavaScript teks akan dibahagikan kepada rentang yang terpisah dengan kelas ditambahkan secara automatik ke rentang ganti.
.word: hover .down {transform: translate3d (0px, 8px, 0px) putar (-12deg); warna: # 058b05; }
06. Automatik untuk rakyat
Tidak perlu repot untuk meletakkan setiap huruf dalam rentang bergantian dengan kelas yang berbeda, jadi kami akan mengotomatisasi prosesnya dengan mendapatkan JavaScript untuk meminta pemilih dan mengambil setiap huruf. Di sini str pemboleh ubah merebut huruf semasa ketika melintasi teks.
skrip> var elemen = document.querySelectorAll ('.word'); untuk (var i = 0, l = element.length; i l; i ++) {var str = elemen [i] .textContent; unsur [i] .innerHTML = ’’;
07. Tambah kelas gantian
Kini gelung lain meletakkan setiap huruf dalam elemen rentangnya sendiri dan menambah huruf naik atau turun kelas ke rentang. Sekiranya anda melihat ini di penyemak imbas, anda akan melihat teks dibahagi dengan setiap huruf ke atas dan ke bawah, sambil berputar sedikit.
Anda dapat melihat kesannya dalam tindakan di laman web Anak Tengah.
untuk (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); elemen [i] .appendChild (spn); spn.textContent = str [j]; biarkan pos = (j% 2)? 'atas bawah'; spn.classList.add (pos); }} / skrip>
Artikel ini pada mulanya diterbitkan dalam majalah reka bentuk web kreatif Pereka web.Terbitan 286 atau melanggan.
