纯CSSt实现照片墙效果

纯CSS实现的照片墙效果，鼠标经过图片是图片上浮变大，照片程不同角度倾斜如图：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一起度过的第一个生日</title>
    <link type="text/css" rel="stylesheet" href="../css/zhaopianqiang.css">
    <script src="../js/birth.js"></script>
</head>
<body background="../.idea/img/bgpic1.jpg">
<!--创建class或ID以便在CSS中操作-->
<div class="container">
    <!--定义两个class以便于对图片的统一处理-->
    <img class="pic pic1" src="../.idea/生日会/1.jpg">
    <img class="pic pic2" src="../.idea/生日会/2.jpg">
    <img class="pic pic3" src="../.idea/生日会/3.jpg">
    <img class="pic pic4" src="../.idea/生日会/4.jpg">
    <img class="pic5 pic" src="../.idea/生日会/5.jpg">
    <img class="pic6 pic" src="../.idea/生日会/6.jpg">
    <img class="pic7 pic" src="../.idea/生日会/7.jpg">
    <img class="pic8 pic" src="../.idea/生日会/8.jpg">
    <img class="pic9 pic" src="../.idea/生日会/9.jpg">
    <img class="pic10 pic" src="../.idea/生日会/10.jpg">
</div>
<div class="container">
    <img class="pic11 pic" src="../.idea/生日会/11.jpg">
    <img class="pic12 pic" src="../.idea/生日会/12.jpg">
    <img class="pic13 pic" src="../.idea/生日会/13.jpg">
    <img class="pic14 pic" src="../.idea/生日会/14.jpg">
    <img class="pic15 pic" src="../.idea/生日会/15.jpg">
    <img class="pic16 pic" src="../.idea/生日会/16.jpg">
    <img class="pic17 pic" src="../.idea/生日会/17.jpg">
    <img class="pic18 pic" src="../.idea/生日会/18.jpg">
    <img class="pic19 pic" src="../.idea/生日会/19.jpg">
    <img class="pic20 pic" src="../.idea/生日会/10.jpg">
</div>
<!--controls属性实现显现-->
<audio id="audio" src="../mp3/查杰%20-%20何求%20(clip).mp3" >您的浏览器不支持</audio>
<script>
    var a=document.getElementById("audio");
    //autoplay 属性设置或返回音视频是否在加载后即开始播放
    a.autoplay=true;
    //    loop 属性设置或返回音频/视频是否应该在结束时再次播放。
    a.loop=true;
//去掉 controls 属性就可以隐藏
</script>
<!--<embed src="../mp3/查杰%20-%20何求%20(clip).mp3" autostart="true" loop="true" hidden=true ></embed>-->
<!--firefox 不支持embed标签-->
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: gray;
}
.container{
    width: 960px;
    height: 450px;
    margin: 30px auto;
    position: relative;
}
.pic{
    width: 160px;
}
/*给一个鼠标事件*/
.container img:hover{
    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
    /*z-index 属性设置元素的堆叠顺序。
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    z-index: 2;
    /*scale实现缩放效果*/
    transform: rotate(0deg) scale(1.20);
}
.container img{
    padding: 10px 10px 15px;
    color: white;
    border: 1px solid #dddddd;
    /*关于rgba属性：R红色值，G绿色值，B蓝色值，Alpha透明度。色彩空间
    CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。*/
    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in ;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    position: absolute;
    z-index: 1;
}

.pic1{
    left: 400px;
    top:0;
    transform: rotate(-5deg);
}.pic2{
     left: 200px;
     top:0;
     transform: rotate(-20deg);
 }.pic3{
      buttom: 100px;
      right: 100px;
      transform: rotate(-5deg);
  }.pic4{
       buttom: 0px;
       left: 300px;
       transform: rotate(-10deg);
   }.pic5{
        buttom: 0px;
        top: 0px;
        transform: rotate(20deg);
    }.pic6{
         left: 0px;
         top: 0px;
         transform: rotate(10deg);
     }.pic7{
          left: 850px;
          top: 0px;
          transform: rotate(20deg);
      }.pic8{
           buttom: -20px;
           top:60px;
           transform: rotate(5deg);
       }.pic9{
            left: 550px;
            top:90px;
            transform: rotate(15deg);
        }
.pic10{
    left: 400px;
    top:0;
    transform: rotate(-5deg);
}.pic11{
     left: 200px;
     top:0;
     transform: rotate(-30deg);
 }.pic12{
      buttom: 100px;
      right: 100px;
      transform: rotate(-5deg);
  }.pic13{
       buttom: 0px;
       left: 300px;
       transform: rotate(-10deg);
   }.pic14{
        buttom: 0px;
        top: 0px;
        transform: rotate(15deg);
    }.pic15{
         left: 0px;
         top: 0px;
         transform: rotate(10deg);
     }.pic16{
          left: 850px;
          top: 0px;
          transform: rotate(20deg);
      }.pic17{
           buttom: -20px;
           top:50px;
           transform: rotate(25deg);
       }.pic18{
            left: 550px;
            top:90px;
            transform: rotate(15deg);
        }
.pic19{
    left: 400px;
    top: 0px;
    transform: rotate(-20deg);
}.pic20 {
     left: 850px;
     top: 0px;
     transform: rotate(20deg);
 }

纯CSSt实现照片墙效果

猜你喜欢