基于HTML5+CSS3 制作一个音乐播放页面

1024_代码狂欢

已于 2023-12-18 11:21:37 修改

阅读量468

点赞数 3

文章标签： html5 css3 前端

于 2023-12-18 11:00:42 首次发布

本文链接：https://blog.csdn.net/m0_75047166/article/details/134318137

版权

用到的素材：

html+css代码块儿：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放页面</title>
<link rel="stylesheet" href="style08.css" type="text/css" />
	<style type="text/css">
		#box-video{
			width:100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
		}
		.box-video video{
			position:absolute;
			top:50%;
			left:50%;
			margin-left: -1350px;
			margin-top: -540px;
		}
		.cd{
			width: 422px;
			height: 422px;
			position: absolute;
			top: 25%;
			left: 10%;
			z-index: 2;
			border-radius: 50%;
			border: 10px solid #fff;
			box-shadow: 5px 5px 15px #000;
			background: url("cd_img.jpg") no-repeat;
		}
		.canter{
			width: 100px;
			height: 100px;
			background-color: #000;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
			z-index:3;
			border: 5px solid #fff;
			background-image: url("image/yinfu.gif");
			background-position: center center;
			background-repeat: no-repeat;
		}
		
		.song{
			position: absolute;
			top: 25%;
			left: 50%;
		}
		@font-face{
			font-family: MD;
			src: url("MD.ttf");
		}
		h2{
			font-family:MD;
			font-size: 110px;
			color: #913805;
		}
		p{
			width: 556px;
			height: 300px;
			font-family: "微软雅黑";
			padding-left: 30px;
			line-height: 30px;
			background: url(bg.png) repeat-x;
			box-sizing: border-box;
			
		}
		
	</style>
</head>


<body>
	<div id="box-video">
		<video src="image/mailang.mp4" autoplay="autoplay" loop></video>
	    <div class="cd">
	      <div class="canter">
		  
		  </div>
	    </div>
	    <div class="song">
	      <h2>风中的麦浪</h2>
		    <p>爱过的地方<br/>当微风带着收获的味道<br/>吹向我脸庞<br/>想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯...啦...嗯...啦...<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p>
		<audio src="mailang.mp3" autoplay="autoplay" loop></audio>
        </div>
	</div>	
</body>
</html>