給大家做一個小案例,如何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有哪些新增的背景屬性
在HTML裡web標準是什麼
CSS3怎麼做出響應式布局