Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan animasi regangan kiri dan kanan dalam css3
Bagaimana untuk mencapai kesan animasi regangan kiri dan kanan dalam css3
- WBOYasal
- 2021-12-14 17:57:303803semak imbas
Kaedah: 1. Gunakan pernyataan "elemen {animation: name time}" untuk mengikat animasi pada elemen; 1);} }", tetapkan tindakan animasi pengembangan dan pengecutan elemen, dan capai kesan animasi pengembangan dan pengecutan kiri dan kanan elemen.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Bagaimana untuk mencapai kesan animasi penskalaan kiri dan kanan dalam css3
Dalam css, jika anda ingin mencapai animasi penskalaan kiri dan kanan, anda perlu mengikat elemen imej melalui atribut animasi Tetapkan animasi dan tentukan masa animasi.
Kemudian gunakan peraturan bingkai utama untuk menentukan tindakan animasi elemen Tindakan khusus adalah berdasarkan atribut transformasi dan fungsi skala untuk menskalakan 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>
div{
width:100px;
height:100px;
margin:0 auto;
background-color:pink;
animation:fadenum 5s;
}
@keyframes fadenum{
50%{transform:scale(3,1);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan animasi regangan kiri dan kanan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!