Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan animasi putaran dan anjakan dalam css3
Bagaimana untuk melaksanakan animasi putaran dan anjakan dalam css3
- WBOYasal
- 2021-12-16 15:25:374209semak imbas
Kaedah: 1. Gunakan atribut animasi untuk mengikat animasi pada elemen 2. Gunakan pernyataan "@keyframes {100%{transform:rotate (rotation angle) translate (displacement distance);}}" untuk menetapkan bingkai utama Tindakan elemen untuk putaran dan anjakan untuk mencapai kesan animasi putaran dan anjakan.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melaksanakan animasi putaran dan anjakan dalam css3
Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi putaran dan anjakan kepada elemen .
Gunakan peraturan @keyframes untuk menetapkan kerangka utama tindakan animasi bagi elemen, gunakan atribut transform dengan fungsi rotate() untuk menetapkan tindakan putaran elemen dan gunakan atribut transform dengan fungsi translate() untuk tetapkan tindakan anjakan elemen.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:pink;
border-radius:50%;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
0%{transform:rotate(360deg) translateX(-200px);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转加位移的效果</div>
</body>
</html>Hasil output:
(Belajar perkongsian video: css tutorial video )
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi putaran dan anjakan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!