Gunakan html5 css3 untuk mencapai kesan penukaran gelangsar Ucap selamat tinggal kepada kemahiran tutorial javascript css_html5

Nah, kali terakhir saya berkata saya akan membuat beberapa artikel secepat mungkin, tetapi saya dengan tenang terlepas janji temu. Sudah hampir sebulan saya tidak menyiarkan artikel, yang benar-benar menyedihkan. Saya mendapati bahawa saya tidak boleh meluangkan masa baru-baru ini, saya pada dasarnya disusun satu demi satu projek. Saya sama ada tidak dapat mencari topik yang sesuai apabila saya bebas, atau saya tidak dapat meluangkan masa apabila saya mempunyai topik yang kusut. . Oleh itu, saya memutuskan untuk meringkaskan mata pengetahuan mengenai masalah yang saya hadapi untuk satu tempoh masa, mengkajinya satu per satu secara mendalam apabila saya mempunyai masa lapang, dan kemudian menyusunnya menjadi artikel dan berkongsinya.

Mari kita sampai ke intinya Apabila bercakap tentang peluncur, pada masa lalu, CSS dan JS telah digunakan untuk mencapai kesan penukaran yang berkaitan. Saya telah mendengar bahawa semua orang telah membincangkan pelaksanaan menggunakan html5 css3, tetapi saya tidak pernah melaksanakannya sendiri. Ok kali ni ada masa nak main css3. Malah, saya juga tertarik dengan mesej di Weibo. Saya melihat hasil yang menakjubkan yang dicapai oleh orang lain, dan kemudian saya mempunyai keinginan untuk melakukannya sendiri.
1. Rendering

Ia tidak kelihatan jauh berbeza daripada kesan yang dicapai dengan js pada masa lalu, tetapi perasaan keseluruhannya sangat elegan. Nah, kuasa CSS3 ialah saya boleh mencapai kesan yang agak kompleks dengan menulis kod yang sangat sedikit. Walau bagaimanapun, contoh ini juga tidak sempurna Apabila menukar antara dua gambar, jika terdapat gambar di tengah, ia akan tetap dilihat semasa pelaksanaan animasi CSS3, yang agak tidak berkesan. Tetapi fikirkan, ini adalah kesan yang dicapai oleh css3 tulen Perubahan struktur html kompleks yang dilaksanakan dengan js tidak dapat dilihat di sini, jadi kesan di atas sukar dicapai hanya dengan css3.
2. struktur HTML >

;

>

Tajuk1Penerangan1 /pic1.png"/> < /article>

Title2

Penerangan2< /a>

Title3

info">

Tajuk4< /h1>
Penerangan4

<
Penerangan5

artikel>

>

="slider4">

;/label>
>