Apakah kegunaan bingkai utama dalam css3-tutorial css-php.cn

Apakah kegunaan bingkai utama dalam css3

WBOY

Lepaskan： 2021-12-15 17:36:10

asal

8554 orang telah melayarinya

Kerangka kunci dalam css digunakan untuk menentukan tindakan animasi elemen Ia adalah peraturan css untuk mencipta animasi, peraturan bingkai utama terdiri daripada kata kunci "@keyframe" dan sintaksnya ialah "@keyframes nama animasi {keyframes; -pemilih{css -styles;}}".

Apakah kegunaan bingkai utama dalam css3

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

Apakah penggunaan bingkai utama dalam css3

Atribut ini berkait rapat dengan atribut animasi.

keyframe yang diterjemahkan ke dalam bahasa Cina bermaksud "bingkai kunci".

Menggunakan atribut peralihan juga boleh mencapai kesan animasi peralihan, tetapi ia agak kasar kerana ia tidak dapat mengawal proses animasi dengan lebih halus Contohnya, ia hanya boleh mengawal keseluruhan peralihan atribut tertentu dalam a tempoh masa yang ditentukan, dan Atribut animasi boleh menggunakan @keyframes untuk membahagikan animasi dalam tempoh masa yang ditentukan dengan lebih halus.

Struktur tatabahasa:

@keyframes animationname {keyframes-selector {css-styles;}}

Salin selepas log masuk

Analisis parameter:

nama animasi: mengisytiharkan nama animasi.

pemilih bingkai kunci: Digunakan untuk membahagikan tempoh animasi, anda boleh menggunakan borang peratusan, atau anda boleh menggunakan borang "daripada" dan "kepada". Borang "dari" dan "kepada" adalah bersamaan dengan 0% dan 100%. Adalah disyorkan untuk sentiasa menggunakan borang peratusan.

Contohnya 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;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Jika anda berminat, anda boleh terus melawat: Tutorial video css.

Atas ialah kandungan terperinci Apakah kegunaan bingkai utama dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!