Adakah kesan animasi css3 mempunyai ubah bentuk?-Soal Jawab bahagian hadapan-php.cn

Adakah kesan animasi css3 mempunyai ubah bentuk?

WBOY

Lepaskan： 2022-04-28 14:41:10

asal

1583 orang telah melayarinya

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, transform Properties digunakan untuk menetapkan gaya ubah bentuk.

Adakah kesan animasi css3 mempunyai ubah bentuk?

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

Adakah kesan animasi css3 mempunyai ubah bentuk?

Adakah kesan animasi css3 mempunyai ubah bentuk?

Ubah bentuk boleh menggunakan atribut transformasi dalam css atribut transform menggunakan 2D pada elemen atau penukaran 3D. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Anda boleh menggunakan atribut animasi untuk menetapkan animasi Atribut ini ialah atribut singkatan yang boleh ditetapkan:

nama-animasi menentukan nama bingkai utama yang perlu. terikat kepada pemilih. .
tempoh animasi menentukan masa yang diperlukan untuk menyelesaikan animasi, dalam saat atau milisaat.
fungsi pemasaan-animasi menentukan lengkung kelajuan animasi.
tunda-animasi menentukan kelewatan sebelum animasi bermula.
kiraan lelaran-animasi menyatakan bilangan kali animasi harus dimainkan.
arah animasi menentukan sama ada animasi perlu dimainkan secara terbalik mengikut giliran.

Contohnya 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>

Salin selepas log masuk

Hasil output:

(Perkongsian video pembelajaran: tutorial video css)

Atas ialah kandungan terperinci Adakah kesan animasi css3 mempunyai ubah bentuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!