一、结构分析
整体是放在一个大的盒子里面，然后分为三块（背景图、左边的唱片以及右边的歌词），第一部分是将视频放进去，第二部分是文字（歌词）和音频，第三部分是中间那个表盘，这三块是并行存在的。表盘需要进行边框设置，然后设置成圆的，中间添加一张背景图片。文字那个是将文字进行设置，可以通过h2和p标记定义。
二、样式分析
控制效果图的样式主要分为以下几个部分：
（1）首先对最外层的大盒子进行页面设置，宽、高、定位。
（2）将视频盒子设置为页面背景，并对其设置宽度、高度、定位和外边距，使其始终显示在浏览器居中位置。
（3）唱片盒子，里面还需要一个盒子，设置宽、高、定位。使其显示在外面盒子的中间位置。最外面的盒子，需要对其设置宽高、圆角边框、内阴影以及背景图片。
（4）歌词盒子，需要添加h2和p的样式，设置宽、高、背景以及字体样式。添加一种新的字体
三、页面代码
<head>
<meta charset="UTF-8">
<title>音乐播放页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box-video{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
#box-video video{
min-width: 100%;
min-height: 100%;
max-height: 4000%;
max-width: 4000%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.cd{
width: 422px;
height: 422px;
position: absolute;
top: 25%;
left: 10%;
z-index:2;
border-radius: 50%;
border: 10px solid palevioletred;
box-shadow: 5px 5px 15px #000;
background:
url(img/9091bb54856efec7d0882c13d188f2a3_6-1G124163IC57.png) no-repeat;
}
.center{
width:100px;
height: 100px;
border-radius: 50%;
position: absolute;
top:38%;
left: 38%;
z-index: 3;
border: 5px solid paleturquoise;
background: #000
url(img/yinfu.gif) no-repeat;
}
.song{
position: absolute;
top:25%;
left: 50%;
}
@font-face {
font-family:MD;
src: url(font/MD.ttf);
}
h2{
font-family: MD;
font-size: 110px;
color: cornflowerblue;
}
p{
width: 556px;
height: 300px;
font-family: "微软雅黑";
padding-left: 30px;
line-height: 30px;
color: palevioletred;
background: url(img/bg.png)
repeat-x;
opacity: 0.4;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box-video">
<video src="media/DAOKO-米津玄師-烟花 (《烟花》电影同名主题曲)(高清).mp4"
autoplay="autoplay" loop="loop"></video>
<div class="cd">
<div
class="center"></div>
</div>
<div class="song">
<h2>打上花火</h2>
<p>あの日見渡した渚を<br/>今も思い出すんだ<br/>砂の上に刻んだ言葉<br/>君の後ろ姿<br/>寄り返す波が<br/>足元をよぎり何かを攫う<br/>夕凪の中<br/>日暮れだけが通り過ぎて行く</p>
<audio src="media/DAOKO (ダヲコ) _ 米津玄師 (よねづ けんし) - 打上花火.mp3" ></audio>
</div>
</div>
</body>
</html>
四、页面效果
我本人是以《打上花火》为例，后面是这首歌的MV，设置了自动播放，与此同时，在打开页面的同时，会响起来这首歌的音频。也是自动循环播放。
制作人：只识闲人不识君
日期：2020.04.06