Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencapai kesan animasi putaran dan penskalaan dalam css3

Bagaimana untuk mencapai kesan animasi putaran dan penskalaan dalam css3

WBOY
WBOYasal
2021-12-16 11:45:542491semak imbas

Kaedah: 1. Gunakan pernyataan "elemen {animation:name time}" untuk mengikat animasi putaran dan penskalaan kepada elemen 2. Gunakan "@keyframes name {100%{transform:rotate(rotation angle ) skala(skala) Proportion);}}" pernyataan untuk mencapai kesan animasi putaran dan penskalaan.

Bagaimana untuk mencapai kesan animasi putaran dan penskalaan dalam css3

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

Cara mencapai kesan animasi putaran dan penskalaan dalam css3

Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi putaran dan penskalaan kepada elemen.

Gunakan peraturan @keyframes untuk menetapkan kerangka utama tindakan animasi elemen, gunakan atribut transform dengan fungsi rotate() untuk menetapkan tindakan putaran elemen dan gunakan atribut transform dengan fungsi scale() untuk tetapkan tindakan penskalaan elemen.

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:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转缩放的效果</div>
</body>
</html>

Hasil keluaran:

 1.gif

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan animasi putaran dan penskalaan 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