纯CSS3不规则瀑布流布局特效
Posted 流楚丶格念
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯CSS3不规则瀑布流布局特效相关的知识，希望对你有一定的参考价值。
展示
项目链接
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%);
}
以上是关于纯CSS3不规则瀑布流布局特效的主要内容，如果未能解决你的问题，请参考以下文章