Maison > Article > interface Web > Comment obtenir un effet d'animation d'étirement gauche et droit en CSS3

Comment obtenir un effet d'animation d'étirement gauche et droit en CSS3

WBOYoriginal: 2021-12-14 17:57:303803parcourir

Méthode : 1. Utilisez l'instruction "element {animation: name time}" pour lier l'animation à l'élément ; 2. Utilisez le "@keyframes name {50%{transform:scale(left and right scaling multiple, 1) ; }} », définit l'action d'animation de l'expansion et de la contraction de l'élément pour obtenir l'effet d'animation d'expansion et de contraction gauche et droite de l'élément.

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

Comment obtenir un effet d'animation d'étirement à gauche et à droite en CSS3

En CSS, si vous souhaitez obtenir une animation d'étirement à gauche et à droite, vous devez lier l'animation à l'élément d'image via l'attribut d'animation et spécifier l'animation temps.

Utilisez ensuite les règles d'images clés pour spécifier les actions d'animation des éléments. Les actions spécifiques sont basées sur l'attribut de transformation et la fonction d'échelle pour mettre à l'échelle les éléments.

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;
            margin:0 auto;
            background-color:pink;
            animation:fadenum 5s;
        }
        @keyframes fadenum{
   50%{transform:scale(3,1);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Résultat de sortie :

Comment obtenir un effet danimation détirement gauche et droit en CSS3

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 transform animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est la fonction pour implémenter la rotation 2D en CSS3Article suivant：Quelle est la fonction pour implémenter la rotation 2D en CSS3

Articles Liés

Voir plus