Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan animasi putaran dalam css3
Bagaimana untuk melaksanakan animasi putaran dalam css3
- 青灯夜游asal
- 2021-12-16 15:13:297829semak imbas
Kaedah pelaksanaan: 1. Gunakan pernyataan "@keyframes animation name {50% {transform: rotate(rotation angle);}" untuk mencipta animasi putaran; 2. Gunakan "elemen {animation: animation name time infinite;} ” pernyataan menggunakan animasi putaran pada elemen yang ditentukan.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
css3 melaksanakan animasi putaran
1 Jika anda ingin menggunakan css3 untuk melaksanakan animasi, anda perlu menggunakan animasi atribut dan "@keyframes" "peraturan.
@keyframes ialah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
Animasi adalah serupa dengan peralihan kerana ia merupakan perwakilan menukar sifat CSS dari semasa ke semasa. Perbezaan utama ialah peralihan dicetuskan secara tersirat apabila nilai sifat berubah (contohnya, apabila nilai sifat berubah pada tuding), tetapi animasi dilakukan secara eksplisit apabila sifat animasi digunakan. Oleh itu, animasi perlu menunjukkan nilai eksplisit untuk sifat animasi. Nilai ini ditakrifkan oleh bingkai utama animasi yang dinyatakan dalam peraturan @keyframes. Oleh itu, peraturan @keyframes terdiri daripada satu set peraturan gaya CSS terkapsul yang menerangkan cara nilai harta berubah dari semasa ke semasa.
Kemudian, menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal pelbagai aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada untuk bergantian antara nilai mula dan tamat, dan animasi Sama ada ia harus berjalan atau berhenti seketika. Animasi juga boleh melambatkan masa mulanya.
Sintaks:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
} 2. Gunakan transform: rotate(旋转角度) dalam peraturan "@keyframes" untuk mengawal tindakan putaran .
Kod pelaksanaan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: pink;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi putaran dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!