HTML+CSS实现简易可交互照片墙

效果图

首先先把效果图摆上

HTML+CSS实现简易可交互照片墙_第1张图片

功能

可以进行动态交互,当鼠标放到图片上时,图片会旋转放大。

代码

首选,要实现一个简易的可交互的照片墙,我们需要先找到合适的图片,然后就是利用代码实现了。

HTML代码:
使用时,只需要将图片地址换成自己的本地地址即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Wall</title>
    <link type="text/css" rel="stylesheet" href="./style2.css">

</head>
<body >
<div class="container">
    <img class="pic pic1" src="img/1.jpg">
    <img class="pic pic2" src="img/2.jpg">
    <img class="pic pic3" src="img/3.jpg">
    <img class="pic pic4" src="img/4.jpg">
    <img class="pic5 pic" src="img/5.jpg">
    <img class="pic6 pic" src="img/6.jpg">
    <img class="pic7 pic" src="img/7.jpg">
    <img class="pic8 pic" src="img/8.jpg">
    <img class="pic9 pic" src="img/9.jpg">
    <img class="pic10 pic" src="img/10.jpg">
</div>

<div class="container">
    <img class="pic11 pic" src="img/11.jpg">
    <img class="pic12 pic" src="img/12.jpg">
    <img class="pic13 pic" src="img/13.jpg">
    <img class="pic14 pic" src="img/14.jpg">
    <img class="pic15 pic" src="img/15.jpg">
    <img class="pic16 pic" src="img/16.jpg">
    <img class="pic17 pic" src="img/17.jpg">
    <img class="pic18 pic" src="img/18.jpg">
    <img class="pic19 pic" src="img/19.jpg">
    <img class="pic20 pic" src="img/20.jpg">
</div>
</body>
</html>

CSS代码:

*{
    margin: 0px;
    padding: 0;

}
body{
    background: url("img/0.jpg")  ;
    background-size:100% 100%;
    /*background-repeat: no-repeat;*/
    /*background-size: auto;*/
}
.container{
    width: 960px;
    height: 450px;
    margin: 30px auto;
    position: relative;
}
.pic{
    width: 160px
}

.container img:hover{
    box-shadow: 35px 35px 35px rgba(50,50,50,0.8);
    transform: rotate(0deg) scale(1.5);
    z-index: 1;/*代表图片层级,将其设置为最上面的图层*/
}

.container img{
    border-radius: 60px;
    width: 160px;
    height: 160px;
    padding: 10px;
    background-color: white;
    box-shadow: 15px 15px 15px rgba(50,50,50,0.99);
    position: absolute;
    /*绝对定位--利用Left可以手动调整照片位置*/
    /*加入动画效果*/
    transition: all 1s ease-in;
}

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

}
.pic18{
    left: 550px;
    top:50px;
    transform: rotate(15deg);
}
.pic19{
    left: 400px;
    top: 0px;
    transform: rotate(-20deg);
}.pic20 {
     left: 790px;
     top: 50px;
     transform: rotate(20deg);
 }

至此,一个简易照片墙就实现了。

你可能感兴趣的:(Web开发)