Maison >interface Web >tutoriel CSS >Tutoriel d'animation CSS : vous apprenez étape par étape à obtenir des effets de changement de page
Tutoriel d'animation CSS : vous apprenez étape par étape à obtenir des effets de changement de page
- WBOYoriginal
- 2023-10-24 09:30:261279parcourir
Tutoriel d'animation CSS : vous apprendrez étape par étape comment implémenter des effets de changement de page, des exemples de code spécifiques sont requis
L'animation CSS est un élément essentiel de la conception de sites Web modernes. Il peut ajouter de la vivacité aux pages Web, attirer l'attention des utilisateurs et améliorer l'expérience utilisateur. L'un des effets d'animation CSS courants est l'effet de changement de page. Dans ce didacticiel, je vais vous expliquer étape par étape pour obtenir cet effet accrocheur et vous fournir des exemples de code spécifiques.
Tout d’abord, nous devons créer une structure HTML de base. Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS翻页特效</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="page page1">
<h1>第一页</h1>
</div>
<div class="page page2">
<h1>第二页</h1>
</div>
<div class="page page3">
<h1>第三页</h1>
</div>
</div>
</body>
</html>Dans le code ci-dessus, nous avons créé un conteneur de trois pages. Chaque page a un titre qui affiche un contenu différent.
Ensuite, nous devons écrire des styles CSS. Ouvrez un nouveau fichier CSS et ajoutez le code suivant :
.container {
width: 100%;
height: 100%;
perspective: 1000px;
position: relative;
overflow: hidden;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: 1s;
}
.page1 {
background-color: #f8b195;
transform: rotateY(0deg);
}
.page2 {
background-color: #f67280;
transform: rotateY(-180deg);
}
.page3 {
background-color: #c06c84;
transform: rotateY(-180deg);
}Dans le code ci-dessus, nous définissons la largeur et la hauteur du conteneur à 100% pour s'adapter facilement aux différentes tailles d'écran. Ensuite, nous utilisons la propriété perspective CSS pour créer un effet de perspective 3D, rendant l'effet de retournement de page plus réaliste. Définissez la position sur relative et le débordement sur caché pour garantir que le contenu de la page ne déborde pas du conteneur.
Ensuite, nous définissons la largeur, la hauteur et le positionnement de chaque page, et utilisons l'attribut transform-style pour conserver l'effet de transformation 3D, puis utilisons l'attribut de transition pour obtenir un effet de transition en douceur.
Quant à la couleur de fond de la page, nous définissons une couleur différente pour chaque page afin de la distinguer facilement.
Maintenant que nous avons terminé la structure HTML de base et le style CSS, implémentons l'effet de changement de page.
Ouvrez votre fichier CSS et ajoutez le code suivant :
.container:hover .page1 {
transform: rotateY(180deg);
}
.container:hover .page2 {
transform: rotateY(0deg);
}
.container:hover .page3 {
transform: rotateY(180deg);
}Dans le code ci-dessus, nous déclenchons l'effet flip en utilisant la pseudo-classe :hover. Lorsque l'utilisateur passe le pointeur de la souris sur le conteneur, la page 1 s'inverse à 180 degrés, la page 2 reste la même et la page 3 s'inverse à 180 degrés.
Enregistrez votre code et actualisez le navigateur. Vous devriez maintenant voir les trois parties de la page inversées.
Grâce au didacticiel ci-dessus, nous avons implémenté avec succès un effet de rotation de page CSS accrocheur et fourni des exemples de code spécifiques étape par étape. Vous pouvez l'ajuster et l'étendre en fonction de vos besoins, en ajoutant plus de pages ou des effets plus complexes.
L'animation CSS est une partie très importante et intéressante de la conception Web, elle peut ajouter de la vitalité et de la créativité à votre site Web. J'espère que ce tutoriel pourra vous être utile et inspirer plus de créativité et d'inspiration.
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!