Comment changer lentement la hauteur d'un élément en CSS-tutoriel CSS-php.cn

Comment changer lentement la hauteur d'un élément en CSS

WBOY

Libérer： 2021-12-10 17:04:31

original

3026 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "element {animation: name time}" pour lier l'animation à l'élément et définissez le temps requis pour l'animation ; 2. Utilisez "@keyframes name {100%{height : valeur de hauteur modifiée ; } }", définissez l'action d'animation pour modifier la hauteur de l'élément et obtenez l'effet de modifier lentement la hauteur de l'élément.

Comment changer lentement la hauteur d'un élément en CSS

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

Comment modifier lentement la hauteur des éléments en CSS

En CSS, vous pouvez utiliser l'attribut d'animation et les règles @keyframes pour obtenir l'effet d'animation de la mise à l'échelle des éléments. Grâce aux règles @keyframes, vous pouvez créer des animations.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Utilisez l'attribut height pour définir les actions d'animation. Cette propriété est utilisée pour définir la hauteur de l'élément. Le format de syntaxe de l'attribut

animation est le suivant :

animation: name duration timing-function delay iteration-count direction;

Copier après la connexion

Comment changer lentement la hauteur dun élément en CSS

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;
        }
        @keyframes fadenum{
   100%{height:300px;}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment changer lentement la hauteur dun élément en CSS