基于纯前端CSS3实现倾角瀑布流照片效果显示
Posted java李杨勇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于纯前端CSS3实现倾角瀑布流照片效果显示相关的知识，希望对你有一定的参考价值。
🍅 作者主页：Java李杨勇
🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我，都给你】
🍅文末免费获取源码🍅
临近期末, 你还在为html网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻
常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, 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>获取完整源码：
大家点赞、收藏、关注、评论啦 、查看下方👇🏻👇🏻👇🏻微信公众号免费获取👇🏻👇🏻👇🏻
打卡 文章 更新 180/ 365天
专栏推荐阅读：
以上是关于基于纯前端CSS3实现倾角瀑布流照片效果显示的主要内容，如果未能解决你的问题，请参考以下文章
装备资讯 | 首个城市级基于大倾角视频识别的路内停车系统落地