Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3
Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3
- WBOYasal
- 2021-12-08 17:17:234037semak imbas
Kaedah: 1. Gunakan atribut animasi untuk mengikat animasi putaran bulat pada elemen 2. Gunakan peraturan @keyframes untuk menetapkan tindakan putaran animasi 3. Gunakan "elemen: active{animation-; play-state:paused}" Apabila pernyataan menetapkan elemen untuk berputar dalam gelung, klik pada elemen untuk menghentikan putaran.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara menetapkan klik untuk berhenti apabila elemen berputar 360 darjah dalam css3
Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi putaran bulat ke elemen ; Kemudian gunakan peraturan @keyframes untuk menetapkan tindakan putaran animasi.
Apabila kita memainkan animasi, jika kita ingin menjeda animasi, kita perlu menggunakan atribut animation-play-state. Atribut animation-play-state mempunyai dua nilai: dijeda: menjeda animasi berjalan: terus memainkan animasi
Kita boleh menetapkannya melalui pemilih aktif 🎜>
Hasil keluaran:<!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>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
div:active{
animation-play-state:paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Belajar perkongsian video:
Atas ialah kandungan terperinci Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!