HTML+CSS實現簡易可互動照片牆

阿新 • • 發佈：2020-12-01

效果圖

首先先把效果圖擺上

功能

可以進行動態互動，當滑鼠放到圖片上時，圖片會旋轉放大。

程式碼

首選，要實現一個簡易的可互動的照片牆，我們需要先找到合適的圖片，然後就是利用程式碼實現了。

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);
 }