展示项目链接https://download.csdn.net/download/weixin _ 45525272/36145876酷芳香代码HTML！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title css3不规则瀑布布局特效/titible headbodyh1纯CSS3实现倾斜瀑布流，带滤镜特效/h1 divid=' waterfall ' span img src='./imgs/1.jpg '/span img src='./imgs 5.jpg '/span img src='./imgs/6.jpg '/spanspanimgsrc='./imgs/imgs spanspanimgsrc='./imgs/9.jpg ' 1 span span img src='./imgs/3.jpg '/span span img src='./imgs/5.jpg '/5.imgs 8.jpg '/span img src='./imgs/9.jpg '/9.jpg '/margin :50 px0； font : normal 14px/24px ' microsoftyahei '；'/div/body/html CSS * { margin : 0； padding: 0； border: 0； font-size: 100%； font :智能手机； 垂直对齐：基线； }/* html 5显示- roleresetforolderbrowsers */article，aside，details，figcaption，figure，footer，header，h group }ol，ul { list-style: none； }blockquote，q { quotes: none； }blockquote:before、blockquote:after、q:before、q:after { content: ' '； 内容： none； } table { border-collapse : collapse； 边框间距： 0； }* { box-sizing: border-box； font-family : '微软雅虎'； (H1 )文本对齐：中心； padding: 50px 0； font-size: 32px； 字体权重： bold； color: #333； }#waterfall { column-count: 3； width: 1200px； margin : 0自动； column-gap:仍然单身的树叶； } # waterfall span { margin-bottom 336020 px； 显示： block； Overflow :隐藏； } # waterfallspanimg { display : block； width: 100%； 变换：旋转(4度)； opacity: 0.9； 过滤器： saturate (150 %； } # waterfall span : hoverimg { transform : rotate (0deg )； 变换： scale (1.05； transition: all 200ms linear； opacity: 1； 过滤器： saturate (100 %； }