HTML5新增多媒体属性（加入视频音频）CSS3高级应用（过渡变形动画）精灵图

Posted 2021-06-18 速速逃离月球表面

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5新增多媒体属性（加入视频音频）CSS3高级应用（过渡变形动画）精灵图相关的知识，希望对你有一定的参考价值。

文章目录

HTML5新增的多媒体标签
- 视频``
- 音频``
CSS3高级应用
精灵图
- 精灵图的使用
- 精灵图示例

html5新增的多媒体标签

视频`<video>`

当前<video>元素支持三种视频格式：尽量使用mp4格式

浏览器	MP4	WebM	Ogg
Internet Explorer	√	×	×
Chrome	√	√	√
Firefox	√ 从Firefox 21 版本开始 Linux系统从Firefox 30 开始	√	√
Safari	√	×	×
Opera	√ 从Opera 25版本开始	√	√

语法：

<video src="文件地址" controls="controls"></video>
	<video controls="controls" width="300"> 
	<source src="move.ogg" type="video/ogg" >
	<source src="move.mp4" type="video/mp4" >
	您的浏览器暂不支持 <video> 标签播放视频
</video>

视频<video>——常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载） none（不应加载）	规定是否预先加载视频（如果有了autoplay 就忽略该属性）
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

音频`<audio>`

浏览器	MP3	Wav	Ogg
Internet Explorer	√	×	×
Chrome	√	√	√
Firefox	√	√	√
Safari	√	√	×
Opera	√	√	√

语法：

<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
	<source src="happy.mp3" type="audio/mpeg">
	<source src="happy.ogg" type="audio/ogg">
	您的浏览器暂不支持 <audio> 标签。
</audio>

音频——常见属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	每当音频结束时重新开始放
src	url	要播放音频的地址

谷歌浏览器把音频和视频的自动播放禁止了
可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过javascript解决）

CSS3高级应用

过渡

在不使用 Flash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐的过渡到另外一个状态
现在经常和 :hover 一起搭配使用。

语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease （可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

过渡使用口诀：谁做过渡给谁加

变形

CSS3变形：平移、旋转、缩放、变形
transform:none——不变形
transform-function——变形函数
在这里插入图片描述
transform：translate（x-value,y-value）省略第二个参数默认为0
transform：scale（x-axis,y-axis）省略第二个参数默认为第一个值
transform：skew（x-angle,y-angle）角度值，省略第二个默认为0
transform：rotate（angle）角度值

动画

@keyframes 动画名称{
		@keyframes-selectors {样式属性(即css-styles)};
	}

keyframes-selector：关键帧选择器值：百分比、from（0%）或者to（100%）
css-styles:
定义执行到当前关键帧时对应的动画状态，由css样式属性进行定义，多个属性之间用分号间隔，不能为空

属性	描述
animation-name	使用定义好的动画动画名称 ①none（默认适用于所有块元素和行内元素）②keyframename
animation-duration	动画完成需要的时间（s/ms）
animation-timing-function	动画曲线效果
animation-delay	动画延迟属性
animation-iteration	循环播放的次数infinite
animation-direction	动画播放的方向 ①normal（默认）②alternate（奇数正向、偶数逆向）
animation	复合属性 animation-name animation-duration （必须有）

精灵图

将若干个图片转换成一个大图片有效地减少服务器接收和发送请求的次数，提高页面的加载速度，于是出现了CSS精灵技术（也称为CSS Sprites、CSS雪碧）
在这里插入图片描述
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

举例：
王者荣耀精灵图：
在这里插入图片描述
淘宝精灵图：

精灵图的使用

使用核心：

主要借助于移动背景图片位置来实现，可以使用background-position
移动的距离就是这个目标图片的x和y坐标（网页中的坐标有所不同）。
一般情况下都是往上往左移动，故数值是负值（注意网页中的坐标：x轴右边是正值，左边是负值，y轴同理）
使用精灵图时需要精确测量每个小背景图片的大小和位置

精灵图示例

<style>
    .box{
        width: 200px;
        margin: 0 auto;
        border-style: solid;
        border-color: black;
        overflow: hidden;
    }
    span {
        border-style: solid;
        border-color: chartreuse;
    }
    .iton{
        width: 43px;
        margin-left: 10px;
        height: 44px;
        float: left;
        background: url("./images/精灵图1.png") no-repeat;
    }
    /* .span01 {
        margin-left: 100px;
        margin-top: 30px;
    }
    .span02 {
        margin-top: 20px;
    } */
    .span01{
        background-position: 0 0;
    }
    .span02{
        background-position: -47px 0;
    }
    .span03{
        background-position: -91px 0;
    }
    .span01:hover{
        background-position: 0 -45px;
    }
     .span02:hover{
        background-position: -47px -45px;
    }
    .span03:hover{
        background-position: -91px -45px;
    } 
</style>
<body>
    <div class="box">
        <span class="iton span01"></span>
        <span class="iton span02"></span>
        <span class="iton span03"></span>
    </div>
</body>