Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mengawal masa putaran dalam css3

Bagaimana untuk mengawal masa putaran dalam css3

WBOY
WBOYasal
2021-12-14 12:43:423448semak imbas

Kaedah: 1. Gunakan atribut animasi dan peraturan "@keyframes" untuk mentakrifkan animasi putaran untuk elemen 2. Gunakan atribut "animation-duration" untuk menetapkan masa putaran elemen kawalan. Sintaks ialah "elemen {animation-duration" :time;}".

Bagaimana untuk mengawal masa putaran dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara mengawal masa putaran dalam css3

Dalam css, anda boleh menggunakan atribut animasi untuk mengikat kesan animasi pada elemen, menggunakan " @keyframes" peraturan Tentukan tindakan animasi untuk elemen.

Gunakan atribut tempoh animasi untuk menentukan masa yang diperlukan untuk animasi melengkapkan kitaran, dalam saat atau milisaat.

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-color:pink;
            animation:fadenum;
            animation-duration:10s;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
.div2{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum1;
            animation-duration:5s;
        }
        @keyframes fadenum1{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div class="div1"></div><br><br>
    <div class="div2"></div>
</body>
</html>

Hasil keluaran:

 2.gif

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mengawal masa putaran dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn