ホームページ >ウェブフロントエンド >CSSチュートリアル >画像の表紙表示のアニメーションをcss3で実現する方法
ちょっとしたケースとして、写真カバーアニメーションを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 中国語 Web サイト
その他の関連記事にご注目ください。
関連記事:CSS3 でレスポンシブなレイアウトを作成する方法
以上が画像の表紙表示のアニメーションをcss3で実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。