一、结构分析
整体是放在一个大的盒子里面,然后分为三块(背景图、左边的唱片以及右边的歌词),第一部分是将视频放进去,第二部分是文字(歌词)和音频,第三部分是中间那个表盘,这三块是并行存在的。表盘需要进行边框设置,然后设置成圆的,中间添加一张背景图片。文字那个是将文字进行设置,可以通过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