照片墙---

最新推荐文章于 2023-02-09 11:55:48 发布

SiKongPop

最新推荐文章于 2023-02-09 11:55:48 发布

阅读量611

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/SiKongPop/article/details/73607502

版权

*{
	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

SiKongPop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
照片墙---

*{ 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;/*绝对定位*//*利用le
复制链接

扫一扫