标签：rotate top 100px transform HTML 0px 交互 CSS left
效果图
首先先把效果图摆上
功能
可以进行动态交互，当鼠标放到图片上时，图片会旋转放大。
代码
首选，要实现一个简易的可交互的照片墙，我们需要先找到合适的图片，然后就是利用代码实现了。
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);
}
转载于(4条消息) HTML+CSS实现简易可交互照片墙_never_say_never7的博客-CSDN博客
标签：rotate,top,100px,transform,HTML,0px,交互,CSS,left 来源： https://www.cnblogs.com/de-ming/p/14067789.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。