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

WBOY
WBOYasal
2021-12-14 17:57:303795semak 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.

Bagaimana untuk mencapai kesan animasi regangan kiri dan kanan dalam css3

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:

 6.gif

(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!

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