Maison > Article > interface Web > Tutoriel d'animation CSS : vous apprenez étape par étape à obtenir des effets d'arrière-plan dynamiques
Tutoriel d'animation CSS : vous apprenez étape par étape à obtenir des effets d'arrière-plan dynamiques
- PHPzoriginal
- 2023-10-20 19:01:501038parcourir
Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter des effets d'arrière-plan sautants
Dans la conception Web, les effets d'animation peuvent ajouter de la vivacité à la page et attirer l'attention de l'utilisateur. L'animation CSS est un moyen d'obtenir ces effets. Ce didacticiel vous apprendra étape par étape comment utiliser CSS pour obtenir un effet d'arrière-plan animé, en utilisant des exemples de code spécifiques pour vous faciliter la compréhension et l'application.
Étape 1 : Créer une structure HTML
Tout d'abord, nous devons créer une structure HTML qui contient du contenu. Ajoutez un élément div dans la balise body et donnez-lui un identifiant unique, par exemple :
<body> <div id="background"></div> <!-- 页面其它内容 --> </body>
Étape 2 : Définir le style de base
Ensuite, nous devons définir le style de base pour cet élément div. En CSS, on peut utiliser "position:fixed" pour le fixer dans la page et en faire l'arrière-plan. Et définissez sa largeur et sa hauteur, ainsi que la couleur d’arrière-plan ou l’image d’arrière-plan. L'exemple de code est le suivant :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}Étape 3 : Ajouter des effets d'animation
Ensuite, nous ajouterons des effets d'animation à cet élément d'arrière-plan. Ici, nous utilisons l'animation d'images clés CSS (Keyframe Animation) pour obtenir l'effet de saut. Tout d’abord, nous devons créer une animation en CSS et définir son nom, sa durée et sa méthode de mouvement. L'exemple de code est le suivant :
@keyframes jump {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(10px) translateY(-10px);
}
50% {
transform: translateX(20px) translateY(0);
}
75% {
transform: translateX(10px) translateY(10px);
}
100% {
transform: translateX(0) translateY(0);
}
}
#background {
/* 其它样式 */
animation-name: jump;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}Dans le code ci-dessus, nous définissons une animation nommée "jump", qui obtient l'effet de traduction en modifiant l'attribut de transformation de l'élément dans le processus de 0 % à 100 %. En ajustant les valeurs de TranslateX et TranslateY, nous pouvons contrôler la translation horizontale et verticale de l'élément. Différents niveaux de pourcentage correspondent à différentes positions de translation, formant ainsi un effet de saut.
Enfin, nous appliquons cette animation à l'élément d'arrière-plan, définissons le nom de l'animation sur "sauter" et contrôlons la durée et le mode de mouvement de l'animation en définissant la durée de l'animation, la fonction de synchronisation de l'animation et le nombre d'itérations d'animation et nombre de répétitions.
Étape 4 : Testez l'effet
Après avoir terminé le code ci-dessus, actualisez la page et vous verrez l'effet du saut des éléments d'arrière-plan. Vous pouvez ajuster les paramètres de l'animation et le style des éléments d'arrière-plan en fonction de vos besoins pour obtenir l'effet souhaité.
Résumé :
Grâce à ce tutoriel, nous avons appris à utiliser CSS pour obtenir un effet d'arrière-plan animé. En créant la structure HTML de base, en définissant le style des éléments d'arrière-plan et en utilisant l'animation d'images clés CSS pour obtenir l'effet panoramique, nous pouvons facilement créer une variété d'effets d'animation d'arrière-plan sympas.
Bien sûr, il existe d'autres scénarios d'application et propriétés pour l'animation CSS à explorer. J'espère que ce didacticiel pourra vous aider à comprendre et à utiliser l'animation CSS pour ajouter plus de vivacité et de créativité à votre conception Web. Je vous souhaite plus de succès dans la conception de sites Web !
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!