*{
background-color: black;
}
img{
width:300px;
height:400px;
/*边框效果*/
padding:10px;
background-color:white;
box-shadow: 100px 100px 100px rgba(50,50,50,0.99);
position:absolute;/*绝对定位*//*利用left手动调整照片位置*/
transition: all 1s ease-in;
border-radius: 60px;
}
img:hover{
box-shadow: 100px 100px 100px rgba(10,10,10,0.99);
transform: rotate(0deg) scale(1.3);
}
div{
width:80%;
height:450px;
background: black;
}
.pic1{
left:400px;
top:20px;
}
.pic2{
left:900px;
top:400px;
transform: rotate(10deg);
}
.pic3{
left:1400px;
transform: rotate(-10deg);
}
.pic4{
left:2000px;
transform: rotate(30deg);
}
.pic5{
left:2500px;
transform: rotate(24deg);
}
.pic6{
left:200px;
top:600px;
transform: rotate(14deg);
}
.pic7{
left:800px;
top:700px;
transform: rotate(-13deg);
}
.pic8{
left:1500px;
top:650px;
transform: rotate(24deg);
}
.pic9{
left:2000px;
top:700px;
transform: rotate(40deg);
}
网页版照片墙功能及APP安装,带背景音乐。效果如下:
插上USB接口线到手机。点击图示按钮,安装到手机,可在手机上运行。用手机搜索APP文件或直接用qq文件发送就可以找到HBuilder.app。于是可以分享给好友了。
开发环境:HBuilder。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div>
<img src="img/1.jpg" class="pic1"/>
<img src="img/2.jpg" class="pic2"/>
<img src="img/3.jpg" class="pic3"/>
<img src="img/4.jpg" class="pic4"/>
<img src="img/5.jpg" class="pic5"/>
<img src="img/6.jpg" class="pic6"/>
<img src="img/7.jpg" class="pic7"/>
<img src="img/8.jpg" class="pic8"/>
<img src="img/9.jpg" class="pic9"/>
<img src="img/10.jpg" class="pic10"/>
<img src="img/11.jpg" class="pic11"/>
<embed src="周二珂-告白气球.mp3" left:800px top=1000px loop="true" autoplay="true" hidden="false" style="width: 100%;"/>
</div>
</body>
</html>
style.css