Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3-tutorial css-php.cn

Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3

WBOY

Lepaskan： 2021-12-08 17:17:23

asal

4030 orang telah melayarinya

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.

Bagaimana untuk menetapkan elemen untuk mengklik untuk berhenti apabila ia berputar 360 darjah dalam css3

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>

Salin selepas log masuk

(Belajar perkongsian video:

tutorial video css

)

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!