基于纯前端CSS3实现倾角瀑布流照片效果显示

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我，都给你】

🍅文末免费获取源码🍅

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻

java项目精品实战案例《100套》

web前端期末大作业网页实战《100套》

常见网页设计作业题材有个人、美食、公司、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的2022前端CSS3实现倾角瀑布流网页设计制作，画面精明，非常适合初学者学习使用。

动图演示：

主要代码：

css样式文件：

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%);
}

导入准备好的额素材图片替换成自己的即可：

index.html加载样式和引入img图片:

<!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响应式瀑布流图片展示DEMO演示</title></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>
</body>
</html>