Comment utiliser CSS pour obtenir l'effet d'animation d'arrière-plan rotatif des éléments-tutoriel CSS-php.cn

Comment utiliser CSS pour obtenir l'effet d'animation d'arrière-plan rotatif des éléments

WBOY

Libérer： 2023-11-21 09:05:20

original

1297 Les gens l'ont consulté

Comment utiliser CSS pour obtenir leffet danimation darrière-plan rotatif des éléments

Comment utiliser CSS pour obtenir l'effet d'animation d'arrière-plan rotatif des éléments

L'effet d'animation d'arrière-plan peut augmenter l'attrait visuel et l'expérience utilisateur de la page Web. Cet article explique comment utiliser CSS pour obtenir l'effet d'animation d'arrière-plan rotatif des éléments et fournit des exemples de code spécifiques.

Tout d'abord, nous devons préparer une image d'arrière-plan, qui peut être n'importe quelle image de votre choix, comme une image du soleil ou un ventilateur électrique. Enregistrez l'image et nommez-la "bg.png".

Ensuite, créez un fichier HTML, ajoutez un élément div au fichier et définissez-le comme élément auquel vous souhaitez ajouter une image d'arrière-plan. Par exemple :

<!DOCTYPE html>
<html>
<head>
    <title>旋转背景图动画</title>
    <style>
        .element {
            width: 300px;
            height: 300px;
            background-image: url("bg.png");
            background-size: cover;
            animation: rotate 5s infinite linear;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="element"></div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous définissons d'abord une classe CSS nommée "element" et l'appliquons à l'élément div où une image d'arrière-plan doit être ajoutée. La largeur et la hauteur de l'élément div sont définies sur 300 pixels. L'image d'arrière-plan utilise le "bg.png" préalablement préparé, et l'image d'arrière-plan est mise à l'échelle proportionnellement et couvre l'intégralité de l'élément div via l'attribut background-size.

Ensuite, nous avons ajouté une animation de rotation appelée "rotate" à l'élément div en utilisant l'attribut animation. L'animation se déroulera en boucle infinie pendant 5 secondes, avec une vitesse linéaire.

Dans la règle @keyframes, nous définissons les images clés de l'animation. Dans l'image clé 0 %, définissez l'angle de rotation de l'image sur 0 degré ; dans l'image clé 100 %, définissez l'angle de rotation de l'image sur 360 degrés pour obtenir l'effet d'une rotation complète.

Enfin, nous avons ajouté un élément div à l'intérieur de la balise body et appliqué l'"élément" de classe CSS précédemment défini à cet élément.

Enregistrez et exécutez le fichier HTML, vous verrez l'image d'arrière-plan dans l'élément div commencer à pivoter. C'est ainsi que vous utilisez CSS pour animer l'arrière-plan rotatif d'un élément.

Résumé :

En définissant une animation de rotation et en utilisant l'attribut background-image, nous pouvons obtenir l'effet d'animation d'image d'arrière-plan rotatif de l'élément. Nous pouvons obtenir différents effets en ajustant des attributs tels que le temps d'animation, le sens de rotation et la vitesse. Les exemples de code fournis ci-dessus peuvent vous aider à commencer à créer votre propre animation d'arrière-plan rotative. J'espère que cet article pourra vous être utile !

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!