【HTML5+CSS】视频相关属性的设置-MV

一、结构分析

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

【HTML5+CSS】视频相关属性的设置-MV相关推荐

CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
css文字自动换行及css文字相关属性
white-space: normal; normal:忽略多余的空白,元素内如果有多个空格在一起或换行符(回车键),浏览器会把其看作一个空格来处理,不会影响自动换行(就是元素内容过长,在一行上显示不 ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
CSS之字体属性的设置
1.font-famaily---------设置字体语法:font-family:"字体1","字体2" 2.font-size--------设置字号 f ...
【HTML5+CSS】美观的button设置
一. 首先我们要创建一个button按钮,如我们所知,没有经过设置的按钮比较不美观.如图所示 **二.**例子1 如果我们想要将它变得好看一些,就需要对它进行设置. 以华为官网注册的按钮为例: 首先它 ...
html5 音频事件,HTML5中视频和音频核心事件的相关研究
摘要: 本文通过对HTML 5中视频和音频重要事件的研究,总结出HTML 5中重要事件在什么时候使用其中重要的相关属性,并以实例利用事件相关属性进行设置,给读者以相应启发. 关键字:HTML 5:视 ...
个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...

【HTML5+CSS】视频相关属性的设置-MV

【HTML5+CSS】视频相关属性的设置-MV相关推荐

最新文章

热门文章