纯css实图片现瀑布流布局

最新推荐文章于 2024-05-02 17:59:48 发布

黑无常De上帝

最新推荐文章于 2024-05-02 17:59:48 发布

阅读量99

点赞数

分类专栏： CSS专栏文章标签： css html html5

本文链接：https://blog.csdn.net/qq_30228701/article/details/120786052

版权

CSS专栏专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、HTML部分

<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>

2、css部分

#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%;
}
#waterfall > span:hover img {
  transform: rotate(0deg);
  transform: scale(1.05);
  transition: all 200ms linear;
  opacity: 1;
  filter: saturate(100%);
}

黑无常De上帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实图片现瀑布流布局

1、HTML部分<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/
复制链接

扫一扫