Animasi di laman web dapat menarik lebih banyak pengguna. Tanya diri anda ini - sekiranya anda melihat laman web yang mempunyai sedikit animasi, tidakkah anda ingin meneroka lebih banyak lagi? Sekarang, dengan peralihan CSS, anda dapat menjadikan karya anda menjadi hidup dengan beberapa animasi yang hebat. Dan, ingatlah, ini perlu dilakukan dengan betul. Mari kita meneroka dunia Peralihan CSS dalam urutan berikut:
- Mengapa Peralihan CSS?
- Harta Peralihan
- Apa yang Perlu Anda Nyatakan?
- Fungsi Peralihan-Waktu-Fungsi
- Harta Transisi-Kelewatan
Mengapa Peralihan CSS?
Mari kita ambil contoh. Sekiranya anda menukar warna elemen dari putih menjadi biru, perubahan ini hampir seketika. Untuk kesan yang lebih beranimasi, anda boleh membuat perubahan ini berlaku secara beransur-ansur. Ini juga kelihatan menarik secara visual. Dengan mengaktifkan peralihan CSS, anda dapat menyesuaikan cara perubahan berlaku. Anda dapat menentukan bagaimana perubahan elemen berlaku pada selang waktu tertentu yang mengikuti kurva pecutan.
Peralihan CSS membolehkan anda menentukan perubahan untuk elemen, selang masa tertentu, keluk kelajuan pecutan dan banyak lagi. Anda boleh melakukan semua ini tanpa menggunakan Flash atau JavaScript .
Untuk pemahaman yang lebih baik, anda boleh merujuk gambar di bawah:
timbunan dan timbunan memori di java
Dalam gambar di atas, elemen HTML akan berubah dari merah ke biru dalam masa satu saat. Anda juga akan melihat warna pertengahan ketika peralihan sedang berlangsung. Sekiranya anda tidak akan menggunakan peralihan CSS, anda akan melihat bahawa perubahan warna dari merah ke biru adalah segera - anda tidak akan melihat warna perantaraan. Dengan peralihan CSS, anda akan melihat kesan animasi apabila elemen HTML berubah dari keadaan lama ke yang baru.
Harta Peralihan
Anda boleh menggunakan harta transisi pendek untuk mengawal peralihan CSS. Penggunaan singkatan ini tidak hanya mudah, tetapi juga dapat menghindari parameter yang tidak diselaraskan yang agak mengecewakan untuk melakukan debug dalam CSS.
Transisi-harta menentukan sifat CSS yang anda mahukan kesan peralihan. Hanya sifat CSS ini yang dianimasikan.
Sintaks:
peralihan:
Sebagai pemula, anda mungkin menghadapi beberapa kesukaran dalam menggunakan singkatan. Sekiranya anda berpendapat bahawa menggunakan singkatan sedikit rumit untuk anda sekarang, anda boleh menentukan sifat peralihan secara berasingan. Untuk elemen HTML, anda boleh menentukan sifat peralihan satu persatu seperti yang ditunjukkan dalam contoh di bawah:
div {lebar: ketinggian 100 piksel: latar belakang 100 piksel: sifat peralihan cahaya-sifat: lebar peralihan-durasi: fungsi peralihan-masa-2s: peralihan-kelewatan peralihan: 1s} div: hover {lebar: 300 piksel}Tuding ke atas kotak
Dalam contoh di atas, kami telah menentukan sifat-sifat (transisi-sifat, tempoh peralihan, fungsi peralihan-masa dan kelewatan peralihan) dan nilainya secara terpisah. Kami akan mengetahui mengenai sifat peralihan ini sebentar lagi.
Apa yang Perlu Anda Nyatakan?
Terdapat dua perkara yang perlu anda tentukan untuk membuat peralihan CSS: harta CSS yang ingin menambahkan kesan, dan jangka masa kesan tersebut.Anda perlu ingat satu perkara - apabila anda tidak menentukan jangka masa, peralihan akan mengambil nilai lalai 0 , dan tidak akan ada kesan.
Mari kita pertimbangkan satu contoh:
Kod di bawah menentukan kesan peralihan sifat lebar selama lima saat.
div {lebar: 100px tinggi: latar belakang 100px: peralihan biru: lebar 5s} div: hover {lebar: 600px}Gerakkan kursor ke elemen div di atas, untuk melihat kesan peralihan.
Dalam kod di atas, anda akan melihat bahawa apabila anda mengarahkan kursor ke atas kotak biru, kotak biru akan bertambah lebarnya secara beransur-ansur untuk jangka masa lima saat. Anda juga akan menyedari bahawa apabila anda mengeluarkan kursor dari kotak biru, kotak biru akan kembali ke ukuran asalnya secara beransur-ansur (tidak seketika). Anda juga boleh mengubah nilai lebar dan jangka masa untuk melihat bagaimana sifat peralihan ini mempengaruhi elemen HTML.
Anda juga boleh menambahkan kesan peralihan ke lebih daripada satu harta tanah. Anda boleh melakukannya dengan menggunakan koma untuk memisahkan sifat. Mari kita pertimbangkan satu contoh:
Dalam kod di bawah, sifat peralihan ditentukan untuk lebar, tinggi, dan transformasi.
div {padding: lebar 15px: tinggi 150px: latar belakang 100px: peralihan hijau: lebar 2s, tinggi 2s, transform 2s} div: hover {lebar: 300px tinggi: 200px transform: rotate (360deg)} Hai dunia (Tuding di atas Saya)
Dengan contoh di atas, anda akan melihat bagaimana kotak hijau bergerak semasa anda menuding ke atas kotak.
Kami telah menentukan hanya harta tanah dan jangka masa. Mari lihat parameter lain dengan pelbagai contoh.
Fungsi Peralihan-Waktu-Fungsi
Properti ini menentukan keluk kelajuan untuk kesan peralihan. Ia boleh mengambil nilai berikut:
- Nilai Kemudahan: Ini adalah nilai lalai di mana kesannya perlahan pada permulaan, kemudian lebih cepat dan berakhir perlahan.
- Nilai Linear: Kesan ini tidak mengubah kelajuan peralihan - menjaga kelajuan tetap dari awal hingga akhir.
- Nilai Kemudahan: Kesan ini bermula dengan perlahan.
- Nilai Kelonggaran: Kesan ini mempunyai akhir yang perlahan.
- Nilai Kemudahan keluar: Kesan ini mempunyai permulaan yang perlahan dan juga akhir yang perlahan.
- Nilai kubik-bezier (n, n, n, n): Anda boleh menentukan set nilai anda sendiri dalam fungsi kubik-bezier.
Kod di bawah menunjukkan kesan peralihan untuk nilai linear, kemudahan, kemudahan, kemudahan dan kemudahan keluar.
div {lebar: 100px tinggi: latar belakang 100px: peralihan merah jambu: lebar 2s} # div1 {transisi-timing-fungsi: linear} # div2 {transisi-timing-fungsi: kemudahan} # div3 {transisi-timing-fungsi: kemudahan-dalam } # div4 {transisi-timing-function: easy-out} # div5 {transisi-timing-function: easy-in-out} div: hover {lebar: 300px}Arahkan kursor ke elemen div di bawah
linear
kemudahan
kemudahan
kemudahan
kemudahan dalam keluar
menaikkan sesuatu menjadi kekuatan di java
Harta Transisi-Kelewatan
Kadang-kadang, anda mahu animasi berlaku selepas jangka masa tertentu. Properti penundaan peralihan membolehkan anda menentukan kelewatan untuk kesan peralihan. Anda boleh menentukan kelewatan dalam beberapa saat.
Mari kita ambil contoh untuk melihat kelewatan kesan peralihan:
div {lebar: tinggi 100 piksel: latar belakang 100 piksel: peralihan kuning: kelewatan peralihan 3 s: 1 s} div: hover {lebar: 300 piksel}Arahkan kursor ke elemen div di bawah
Catatan: Anda dapat melihat bahawa kelewatan 1 saat sebelum kesannya bermula
Dalam kod di atas, apabila anda mengarahkan kursor ke atas kotak kuning dengan kursor anda, anda akan melihat (selama satu saat) bahawa tidak ada kesan. Selepas menunggu selama satu saat, anda akan melihat kesannya.
Dengan ini, kita akan mengakhiri artikel Peralihan CSS ini. Anda boleh menambahkan animasi ke Halaman Web anda sekarang. Cuba contoh-contoh ini.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'CSS Transition' dan kami akan menghubungi anda.