Maison >interface Web >tutoriel CSS >Comment réaliser une animation de l'affichage de la couverture de l'image en CSS3
Comment réaliser une animation de l'affichage de la couverture de l'image en CSS3
- php中世界最好的语言original
- 2017-11-24 14:01:261803parcourir
Laissez-moi vous donner un petit cas, comment implémenter une imageanimation pour l'affichage de la couverture avec CSS3. L'affichage de couverture d'image peut être utilisé dans de nombreuses situations, telles que les pages d'affichage de produits, etc.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>css3图片封面展示动画</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="cont s--inactive">
<!-- cont inner start -->
<div>
<!-- el start -->
<div>
<div>
<div>
<div></div>
<div>
<h2>Section 1</h2>
</div>
<div>
<div>Whatever</div>
<div></div>
</div>
</div>
</div>
<div>
<div>1</div>
<div>
<div data-index="1">1</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div>
<div>
<div>
<div></div>
<div>
<h2>Section 2</h2>
</div>
<div>
<div>Whatever</div>
<div></div>
</div>
</div>
</div>
<div>
<div>2</div>
<div>
<div data-index="2">2</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div>
<div>
<div>
<div></div>
<div>
<h2>Section 3</h2>
</div>
<div>
<div>Whatever</div>
<div></div>
</div>
</div>
</div>
<div>
<div>3</div>
<div>
<div data-index="3">3</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div>
<div>
<div>
<div></div>
<div>
<h2>Section 4</h2>
</div>
<div>
<div>Whatever</div>
<div></div>
</div>
</div>
</div>
<div>
<div>4</div>
<div>
<div data-index="4">4</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div>
<div>
<div>
<div></div>
<div>
<h2>Section 5</h2>
</div>
<div>
<div>Whatever</div>
<div></div>
</div>
</div>
</div>
<div>
<div>5</div>
<div>
<div data-index="5">5</div>
</div>
</div>
</div>
<!-- el end -->
</div>
<!-- cont inner end -->
</div>
<script src="js/index.js"></script>
</body>
</html>Ce sont toutes les utilisations de l'animation présentées sur la photo de couverture. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php autres articles liés !
Lecture connexe :
Quels sont les nouveaux attributs d'arrière-plan en CSS3
Quels sont les standards du Web en HTML
Comment créer une mise en page réactive avec CSS3
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!