Rumah >hujung hadapan web >tutorial css >Tutorial animasi CSS: mengajar anda langkah demi langkah cara melaksanakan kesan putaran
. Artikel ini akan mengajar anda cara menggunakan CSS untuk melaksanakan kesan putaran yang mudah dan cantik Melalui contoh kod ringkas, anda boleh menguasai teknik ini dengan mudah.
Buat struktur HTML:Pertama, kita perlu mencipta struktur HTML untuk mengekalkan kesan putaran kita. Dalam fail HTML, tambahkan kod berikut:
<div class="box"> <div class="content"> <!-- 在此处添加你的内容 --> </div> </div>
.box
dan menyarangkan bekas anak .content code>. Anda boleh menambah kandungan yang ingin anda paparkan dalam <code>.content
, seperti teks, gambar, dsb.
.box { width: 200px; height: 200px; position: relative; perspective: 1000px; } .content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; animation: rotate 5s infinite linear; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(1turn); } }
.box
. Pada masa yang sama, kami menetapkan lebar, ketinggian dan kedudukan mutlak .content
dan menetapkan atribut transform-style
kepada preserve-3d
kepada dayakan kesan 3D. .box
,并在其内部嵌套了一个子容器.content
。你可以在.content
中添加你想要展示的内容,例如文字、图片等。
通过上述代码,我们为父容器.box
设置了宽度、高度和相对定位。同时,我们设置了.content
的宽度、高度和绝对定位,并将transform-style
属性设置为preserve-3d
,以启用3D效果。
在@keyframes
中,我们定义了名为rotate
的动画。该动画将元素从初始状态旋转到360度的最终状态,通过transform
属性的rotateY
方法实现。将animation
属性应用在.content
上,并设定动画的播放时间为5秒,循环播放,同时指定线性的动画变化方式。
.content
中的内容会沿着Y轴不断旋转。进一步改进:
.box
的宽度和高度,以适应你的需求。rotateY
Dalam @keyframes
, kami mentakrifkan animasi bernama rotate
. Animasi ini memutarkan elemen daripada keadaan awal kepada keadaan akhir 360 darjah dan dilaksanakan melalui kaedah rotateY
atribut transform
. Gunakan atribut animasi
pada .content
dan tetapkan masa main balik animasi kepada 5 saat, gelung main balik dan tentukan kaedah perubahan animasi linear. .content
akan terus berputar di sepanjang paksi Y.
Peningkatan lanjut:
.box
agar sesuai dengan keperluan anda. 🎜🎜Jika anda ingin menukar arah putaran, cuma ubah suai parameter rotateY
. 🎜🎜Laraskan masa main balik animasi dan mod gelung untuk mendapatkan kesan berbeza. 🎜🎜🎜Ringkasan: 🎜Melalui tutorial dalam artikel ini, kami belajar cara menggunakan CSS untuk melaksanakan kesan putaran yang mudah dan cantik. Dengan melaraskan gaya dengan betul, anda boleh mencipta pelbagai animasi putaran yang hebat. Saya harap artikel ini akan membantu anda memahami dan menggunakan animasi CSS! 🎜Atas ialah kandungan terperinci Tutorial animasi CSS: mengajar anda langkah demi langkah cara melaksanakan kesan putaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!