Quelle est l'utilisation des images clés en CSS3-tutoriel CSS-php.cn

Quelle est l'utilisation des images clés en CSS3

WBOY

Libérer： 2021-12-15 17:36:10

original

8522 Les gens l'ont consulté

Les images clés en CSS sont utilisées pour spécifier les actions d'animation des éléments. Il s'agit d'une règle CSS pour créer des animations ; la règle d'image clé se compose du mot-clé "@keyframe" et la syntaxe est "@keyframes animation name{keyframes-selector{css". -styles;} }".

Quelle est l'utilisation des images clés en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quelle est l'utilisation des images clés en CSS3 ?

Cet attribut est étroitement lié à l'attribut d'animation.

keyframes traduit en chinois signifie « images clés ». Si vous avez utilisé le flash, vous devriez mieux comprendre cela. Bien sûr, si vous ne connaissez pas le flash, il n'y aura aucun problème.

L'effet d'animation de transition peut également être obtenu en utilisant l'attribut transition, mais il est légèrement approximatif car il ne peut pas contrôler le processus d'animation de manière plus précise. Par exemple, il ne peut contrôler globalement la transition d'un certain attribut que dans un délai spécifié. période de temps, tandis que l'attribut d'animation peut utiliser @keyframes pour diviser plus précisément l'animation dans la période de temps spécifiée.

Structure grammaticale :

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

Copier après la connexion

Analyse des paramètres :

animationname : déclare le nom de l'animation.

sélecteur d'images clés : utilisé pour diviser la durée de l'animation, vous pouvez utiliser le formulaire de pourcentage, ou vous pouvez utiliser le formulaire "de" et "à". Les formes « de » et « à » sont équivalentes à 0 % et 100 %. Il est recommandé de toujours utiliser la forme de pourcentage.

L'exemple est le suivant :

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

Copier après la connexion

Résultat de sortie :

Quelle est lutilisation des images clés en CSS3