Heim >Web-Frontend >CSS-Tutorial >So realisieren Sie eine Animation der Bildcover-Anzeige in CSS3
So realisieren Sie eine Animation der Bildcover-Anzeige in CSS3
- php中世界最好的语言Original
- 2017-11-24 14:01:261803Durchsuche
Lassen Sie mich Ihnen einen kleinen Fall geben, wie Sie BildAnimation für die Cover-Anzeige mit CSS3 implementieren. Die Anzeige von Bildcovern kann in vielen Situationen verwendet werden, z. B. auf Produktanzeigeseiten usw.
<!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>Das sind alle Einsatzmöglichkeiten von Animationen, die auf dem Bildcover gezeigt werden. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website anderen verwandten Artikeln!
Verwandte Lektüre:
Was sind die neuen Hintergrundattribute in CSS3?
Was sind die Webstandards in HTML?
So erstellen Sie ein responsives Layout mit CSS3
Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine Animation der Bildcover-Anzeige in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!