css3怎麼實現圖片封面展示的動畫
- php中世界最好的语言原創
- 2017-11-24 14:01:261801瀏覽
給大家做一個小案例，如何css3怎麼實現圖片封面展示的動畫。圖片封面展示在許多情境下可以用到，例如產品展示頁面等。
<!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>圖片封面展示的動畫的用法就是這麼多了。更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是css3怎麼實現圖片封面展示的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3怎麼做幻燈片切換動畫效果下一篇：css3怎麼做幻燈片切換動畫效果