展示
项目链接
https://download.csdn.net/download/weixin_45525272/36145876
代码
HTML
<!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>CSS3不规则瀑布流布局特效</title> <link rel="stylesheet" href="css/waterfall.css"> <!-- 不兼容IE10以下浏览器 --> </head> <body> <h1>纯CSS3实现倾角瀑布流，带滤镜特效</h1> <div id="waterfall"> <span><img src="./imgs/1.jpg" ></span> <span><img src="./imgs/2.jpg" ></span> <span><img src="./imgs/3.jpg" ></span> <span><img src="./imgs/4.jpg" ></span> <span><img src="./imgs/5.jpg" ></span> <span><img src="./imgs/6.jpg" ></span> <span><img src="./imgs/7.jpg" ></span> <span><img src="./imgs/8.jpg" ></span> <span><img src="./imgs/9.jpg" ></span> <span><img src="./imgs/10.jpg" ></span> <span><img src="./imgs/1.jpg" ></span> <span><img src="./imgs/2.jpg" ></span> <span><img src="./imgs/3.jpg" ></span> <span><img src="./imgs/4.jpg" ></span> <span><img src="./imgs/5.jpg" ></span> <span><img src="./imgs/6.jpg" ></span> <span><img src="./imgs/7.jpg" ></span> <span><img src="./imgs/8.jpg" ></span> <span><img src="./imgs/9.jpg" ></span> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
css
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; font-family: "微软雅黑"; } h1 { text-align: center; padding: 50px 0; font-size: 32px; font-weight: bold; color: #333; } #waterfall { column-count: 3; width: 1200px; margin: 0 auto; column-gap: 15px; } #waterfall > span { margin-bottom: 20px; display: block; overflow: hidden; } #waterfall > span img { display: block; width: 100%; transform: rotate(4deg); opacity: 0.9; filter: saturate(150%); } #waterfall > span:hover img { transform: rotate(0deg); transform: scale(1.05); transition: all 200ms linear; opacity: 1; filter: saturate(100%); }
