照片墙---

最新推荐文章于 2024-08-22 07:30:00 发布

原创最新推荐文章于 2024-08-22 07:30:00 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文介绍了一个使用HTML和CSS实现的照片墙网页设计案例，包括图片的布局、动态效果及背景音乐的添加方法。通过HBuilder开发环境，实现了响应式布局，并介绍了如何将此应用安装到手机上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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