<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>瀑布流</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <section id="titleBar"> <h2>瀑布流</h2> </section> <div id="wrap"> <!-- wrap内快速生成里面div结构的快捷方式 --> <!-- (div.box>div.info>((div.pic>img[src="img/$.jpg"])+(div.title>a[href=#]{This is a title})))*10 --> <div class="box"> <div class="info"> <div class="pic"><img src="img/1.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/2.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/3.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/4.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/5.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/6.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/7.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/8.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/9.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="img/10.jpg" alt=""></div> <div class="title"><a href="#">This is a title.</a></div> </div> </div> </div> </body> </html>
css文件如下
body { margin: 0; padding: 0; } body { background: #ddd url(../img/bg.jpg) repeat; } img { border: none; } a { text-decoration: none; color: #444; } @-webkit-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-moz-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-o-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @-ms-keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } @keyframes shade { from { opacity: 1; } 15% { opacity: 0.4; } to { opacity: 1; } } #titleBar { width: 600px; margin: 20px auto; text-align: center; } #wrap { width: auto; height: auto; margin: 0 auto; position: relative; } #wrap .box { width: 280px; height: auto; padding: 10px; border: none; float: left; } #wrap .box .info { width: 280px; height: auto; border-radius: 8px; background: #fff; } #wrap .box .info .pic { width: 260px; height: auto; margin: 0 auto; padding-top: 10px; } #wrap .box .info .pic:hover { -webkit-animation: shade 3s ease-in-out 1; -moz-animation: shade 3s ease-in-out 1; -o-animation: shade 3s ease-in-out 1; -ms-animation: shade 3s ease-in-out 1; animation: shade 3s ease-in-out 1; } #wrap .box .info .title:hover { -webkit-animation: shade 3s ease-in-out 1; -moz-animation: shade 3s ease-in-out 1; -o-animation: shade 3s ease-in-out 1; -ms-animation: shade 3s ease-in-out 1; animation: shade 3s ease-in-out 1; } #wrap .box .info img { width: 260px; border-radius: 3px; } #wrap .box .info .title { width: 260px; height: 40px; margin: 0 auto; line-height: 40px; text-align: center; color: #666; font-size: 18px; font-weight: bold; overflow: hidden; }
效果图如下
望各位大虾不吝赐教！
谢谢