<!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> <style type="text/css"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 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%); } </style> </head> <body> <h1>纯CSS3实现倾角瀑布流,带滤镜特效</h1> <div id="waterfall"> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> <span><img src="http://blog.img.duanshuilu.com/Snipaste_2021-06-29_09-36-44.jpg" ></span> </div> </body> </html>
CSS3响应式瀑布流图片带特效
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
SVG超酷动画Tab菜单栏
下一篇:
CSS3水墨风格背景动画按钮