Let me give you a small case, how to implement picturecover displayanimation with css3. Picture cover display can be used in many situations, such as product display pages, 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>
The picture cover shows so many uses of animation. For more exciting content, please pay attention to php Chinese website Other related articles!
Related reading:
What new background attributes are there in CSS3
##What are the web standards in HTML
How to make responsive layout with CSS3
The above is the detailed content of How to realize animation of image cover display in css3. For more information, please follow other related articles on the PHP Chinese website!