CSS3实现绚丽照片墙

最新推荐文章于 2024-06-11 00:31:00 发布

hzlanzz

最新推荐文章于 2024-06-11 00:31:00 发布

阅读量556

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/github_34988322/article/details/53449605

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关键技术点：

* box-shadow

    * 给元素的边框增加阴影的效果
    * box-shadow：x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

* position

    * 给元素定位，主要用到绝对定位

* z-index

    * 设置元素的上下层显示顺序
    * z-index：整数

* transform

    * 使元素变形的属性，其配合rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用
    * transform：rotate

* transition

    * 设置元素由样式1转变到样式2的过程所需要的时间
    * transition：duration

代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>CSS3照片墙</title>

    <style type="text/css">
        body{
          background:#eee;
        }
        h1{
          text-align: center;
        }
        .container{
          width:960px;
          height: 450px;
          margin:60px auto;
          position:relative;
        }
        img{
          padding:10px 10px 15px;
          background:#fff;
          border:1px solid white;
          position: absolute;

          transition: 1s;
        }
        img:hover{
          -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          transform:rotate(0deg);
          -webkit-transform:scale(1.2);
          -moz-transform:scale(1.2);
          transform:scale(1.2);
          box-shadow:10px 10px 15px #ccc;
          z-index: 100;
        }

        .pic1{
          top:50px;
          left:200px;
          -webkit-transform:rotate(-25deg);
          -moz-transform:rotate(-25deg);
          transform:rotate(-25deg);
        }

        .pic2{
           top:50px;
           left:400px;
           -webkit-transform:rotate(25deg);
          -moz-transform:rotate(25deg);
          transform:rotate(25deg);
        }
    </style>

  </head>

  <body>
      <h1> 照片墙制作</h1>
      <div class="container">
          <img class="pic1" src="images/mm1.jpg" />
          <img class="pic2" src="images/mm2.jpg" />
      </div>
  </body>
</html>

hzlanzz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现绚丽照片墙

关键技术点：* box-shadow * 给元素的边框增加阴影的效果 * box-shadow：x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]* position * 给元素定位，主要用到绝对定位* z-index * 设置元素的上下层显示顺序 * z-index：整数* transform * 使元素变形的属性，其配合
复制链接

扫一扫