Apa yang mentakrifkan animasi putaran dalam animasi css3

WBOY
Lepaskan: 2022-03-22 15:46:02
asal
1902 orang telah melayarinya

Dalam CSS3, anda boleh menggunakan peraturan @keyframes, animasi dan mengubah atribut untuk mentakrifkan atribut animasi putaran digunakan untuk mengikat kesan animasi elemen, peraturan @keyframes digunakan untuk menetapkan tindakan animasi elemen dan mengubah atribut; digunakan untuk menetapkan gaya putaran elemen.

Apa yang mentakrifkan animasi putaran dalam animasi css3

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

Apa yang digunakan untuk mentakrifkan animasi putaran dalam animasi css3

Dengan peraturan @keyframes, anda boleh mencipta animasi.

Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain.

Harta animasi ialah sifat trengkas untuk menetapkan enam sifat animasi:

animation: name duration timing-function delay iteration-count direction;
Salin selepas log masuk

Apa yang mentakrifkan animasi putaran dalam animasi css3

Harta transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

otate(sudut) mentakrifkan putaran 2D, menyatakan sudut dalam parameter.

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>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>
Salin selepas log masuk

Hasil keluaran:

 1.gif

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Apa yang mentakrifkan animasi putaran dalam animasi css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan