纯CSS3实现图片墙

最新推荐文章于 2024-02-17 12:12:17 发布

crper

最新推荐文章于 2024-02-17 12:12:17 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： CSS3图片墙 CSS3图片图片墙 CSS3动画

本文链接：https://blog.youkuaiyun.com/crper/article/details/46331863

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章

订阅专栏

CSS3及HTML5折腾记

23 篇文章

订阅专栏

该博客介绍了如何利用CSS3的transform、transition属性及display属性，创建一个具有动画过渡效果的图片墙。通过初始化凌乱的图片布局，当鼠标悬浮在图片上时，图片会移动到顶层并放大1.5倍。作者提到了素材获取的建议，并分享了包含注释的HTML和CSS代码。此外，还推荐了用于自动补全CSS前缀和整理CSS代码的插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预备知识

DIV+CSS基础
CSS3的transform 和 transition用法
- 主要是用了transform的rotate/scale
- 动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function)
CSS3的box-shadow

值得一提的:更多属性的参数要查询css手册,这里展示只是会用到的;

素材获取

百度自行搜索图片素材,替换下面代码的图片路径即可…
例子中的图片大于400像素小于600像素,其中480X270居多

效果描述

初始化凌乱的图片排序(CSS控制),鼠标悬浮会让图片处于顶层显示,且图片恢复水平展示+放大1.5倍

效果图

代码实现

代码内含注释

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS3实现照片墙</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>纯CSS3实现照片墙</h1>
    <div id="container">
      <img class="position_pic1" src="img/1.jpg" alt="这是一个美眉的图片">
      <img class="position_pic2" src="img/2.jpg" alt="这是一个美眉的图片">
      <img class="position_pic3" src="img/3.jpg" alt="这是一个美眉的图片">
      <img class="position_pic4" src="img/4.jpg" alt="这是一个美眉的图片">
      <img class="position_pic5" src="img/5.jpg" alt="这是一个美眉的图片">
      <img class="position_pic6" src="img/6.jpg" alt="这是一个美眉的图片">
      <img class="position_pic7" src="img/7.jpg" alt="这是一个美眉的图片">
      <img class="position_pic8" src="img/8.jpg" alt="这是一个美眉的图片">
    </div>
</body>
</html>

style.css

  *
{
    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;
}
/*简易版reset*/

h1
{
    text-align: center;
}
/*文字居中*/

#container
{
    position: relative;

    width: 1200px;
    margin: 0 auto;
}
/*块居中*/

#container  img
{
    position: absolute;
    z-index: 1;

    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-property: all;
            transition-property: all;

    border: 5px solid #eee;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/*
      给图片添加一个小阴影(外阴影)及增加边框

    这里的transition分开参数来写,方便小伙伴们理解.当然也可以用简写方式:
    eg: tansition:all 0.5 ease-out

    position在这里的作用是为了偏移图片位置的,,后面可以看到为何
    z-index是为了图片堆叠的排放,,这里为1,hover那里为2(效果即为底层图片第一张显示)
   */

#container   img:hover
{
    z-index: 200;

    -webkit-transform: rotate(0deg);
    -webkit-transform: scale(1.5);
        -ms-transform: rotate(0deg);
        -ms-transform: scale(1.5);
            transform: rotate(0deg);
            transform: scale(1.5);

    border: 5px solid #eee;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
/*
  这一块是让图片在hvoer下的图形变换,水平展示及放大1.5倍;

  transform也可以简写的:
  eg:  transform:rotate(90deg) scale(1);
   */




/*下面这些子类都是来定位图片初始位置及旋转角度的*/
.position_pic1
{
    top: 100px;
    left: 5px;

    -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
            transform: rotate(5deg);
}

.position_pic2
{
    top: 200px;
    left: 600px;

    -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
            transform: rotate(-12deg);
}

.position_pic3
{
    top: 20px;
    left: 400px;

    -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
            transform: rotate(-10deg);
}
.position_pic4
{
    top: 400px;
    left: 0;

    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.position_pic5
{
    top: 400px;
    left: 500px;

    -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
}
.position_pic6
{
    top: 500px;
    right: 50px;

    -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
            transform: rotate(-30deg);
}
.position_pic7
{
    top: 600px;
    left: 250px;

    -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
            transform: rotate(5deg);
}


.position_pic8
{
    top: 200px;
    right: 600px;

    -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
            transform: rotate(35deg);
}