Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar-tutorial css-php.cn

Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar

WBOY

Lepaskan： 2023-11-21 09:05:20

asal

1244 orang telah melayarinya

Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar

Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen berputar

Kesan animasi latar belakang boleh meningkatkan daya tarikan visual dan pengalaman pengguna laman web tersebut. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan animasi latar belakang berputar bagi elemen dan memberikan contoh kod khusus.

Pertama sekali, kita perlu menyediakan imej latar belakang, yang boleh menjadi mana-mana gambar yang anda suka, seperti gambar matahari atau kipas elektrik. Simpan imej dan namakannya "bg.png".

Seterusnya, buat fail HTML, tambahkan elemen div pada fail dan tetapkannya sebagai elemen yang anda perlukan untuk menambah imej latar belakang. Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>旋转背景图动画</title>
    <style>
        .element {
            width: 300px;
            height: 300px;
            background-image: url("bg.png");
            background-size: cover;
            animation: rotate 5s infinite linear;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="element"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mentakrifkan kelas CSS bernama "elemen" dan menerapkannya pada elemen div di mana imej latar belakang perlu ditambah. Lebar dan ketinggian elemen div ditetapkan kepada 300 piksel Imej latar belakang menggunakan "bg.png" yang disediakan sebelum ini dan imej latar belakang diskalakan secara berkadar dan meliputi keseluruhan elemen div melalui atribut saiz latar belakang.

Seterusnya, kami menambah animasi putaran yang dipanggil "putar" pada elemen div menggunakan atribut animasi. Animasi akan berputar tanpa henti selama 5 saat, dengan kelajuan linear.

Dalam peraturan @keyframes, kami mentakrifkan bingkai utama animasi. Dalam bingkai kunci 0%, tetapkan sudut putaran gambar kepada 0 darjah dalam rangka kunci 100%, tetapkan sudut putaran gambar kepada 360 darjah untuk mencapai kesan putaran penuh.

Akhir sekali, kami menambahkan elemen div dalam teg badan dan menggunakan "elemen" kelas CSS yang ditakrifkan sebelum ini pada elemen.

Simpan dan jalankan fail HTML, dan anda akan melihat imej latar belakang dalam elemen div mula berputar. Beginilah cara anda menggunakan CSS untuk menghidupkan latar belakang elemen yang berputar.

Ringkasan:

Dengan mentakrifkan animasi putaran dan menggunakan atribut imej latar belakang, kita boleh mencapai kesan animasi imej latar belakang putaran elemen tersebut. Kita boleh mencapai kesan yang berbeza dengan melaraskan atribut seperti masa animasi, arah putaran dan kelajuan. Contoh kod yang disediakan di atas boleh membantu anda mula mencipta animasi latar belakang berputar anda sendiri. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai kesan animasi latar belakang elemen yang berputar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!