CSS插入音视频，过渡，变形，动画效果
Posted 别Null.了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS插入音视频，过渡，变形，动画效果相关的知识，希望对你有一定的参考价值。
目录
多媒体技术
在html5页面中嵌入视频、音频文件
视频标签
<video src="视频文件路径" controls="controls"></video>
controls属性的取值：
| 属性值 | 描述 |
|---|---|
| autoplay | 自动播放。即页面加载完成后视频文件就开始播放。默认值 |
| loop | 循环播放。视频播放结束后重新开始播放 |
| preload | 预加载，表示视频文件随着页面一起加载，并预备播放。若使用了'autoplay',则该属性值忽略。 |
| poster | 当视频缓冲不足时，该属性连接一张图像。 |
音频标签
<audio src="音频文件路径" controls="controls"></audio>
controls属性的取值：
| 属性值 | 描述 |
|---|---|
| autoplay | 自动播放。即页面加载完成后视频文件就开始播放。默认值。 |
| loop | 循环播放。视频播放结束后重新开始播放。 |
| preload | 预加载，表示视频文件随着页面一起加载，并预备播放。若使用了'autoplay',则该属性值忽略。 |
视频文件的格式
包含视频编码、音频编码和容器格式。
- mpeg4--->mp4
- ogg格式
- webm格式
音频文件的格式
指要在计算机内播放或是处理音频文件。
- mpeg3 ---> mp3
- ogg格式
- wav
- media
音视频实例
<body>
<video src="../media/class1.mp4" controls="autoplay"></video>
<audio src="../media/西海情歌.mp3" controls="autoplay"></audio>
</body>实例结果：
CSS的过渡效果
它可以在不使用Flash动画或者javascript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。
1、transition-property：(属性值) 指定过渡属性
| 属性值 | 描述 |
|---|---|
| none | 表示没有过渡效果 |
| all | 表示所有的CSS属性都带有过渡效果 |
| property | 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔 |
补充：伪类
标签名:hover{ //当鼠标悬停在标签对象上的CSS样式 }
2、transition-duration：指定过渡效果花费的时间。默认值为0，常用单位是秒(s)或毫秒(ms)
3、transition-timing-function：规定过渡效果的速度曲线，默认值为“ease“。
4、transition-delay：过渡效果开始的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。（正数表示过渡动作会延迟触发，负数表示过渡动作会从该时间点开始，之前的动作被截断）
强调：无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。
过渡效果实例
<html>
<style>
div{
width: 400px;
height: 100px;
background-color: red; /*div内容初始背景色*/
font-weight: bold;
color:#fff;
}
div:hover{ /*当鼠标悬停在div内容上*/
background-color: blue;
transition-property: background-color; /*指定过渡属性为background-color,即背景色从红色过渡到蓝色*/
transition-duration: 5s; /*指定过渡效果花费时间为5秒*/
transition-timing-function: ease-in; /*淡入(即开始慢慢地过渡)*/
transition-delay: 2s; /*过渡效果开始的时间*/
}
</style>
<body>
<div>
西安交通大学
</div>
</body>
</html>实例结果：第一个为过渡前，第二个为过渡后。
CSS的变形效果
css3的优点：
- 无需加载额外的文件。
- 提高了网页开发者的工作效率。
- 提高了网页的执行速度。
1、transform：none | transform-functions;
transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。
2、 transform-functions函数。
（1）matrix()：定义矩形变换，即基于X和Y坐标重新定位元素的位置。
（2）translate()：移动元素对象，即基于X和Y坐标重新定位元素。
transform:translate（x-value,y-value）：x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。
（3）scale()：指定对象的2D缩放,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值按百分比进行缩放，例如：0.5表示对象的大小是原来的50%。
transform:scale(x-axis,y-axis)：x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。
（4）rotate():旋转对象，参数是一个度数(表示旋转的度数)
transform: rotate(-180deg); deg表示度数的单位。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。
（5）skew()：倾斜对象，参数是一个度数(表示倾斜的度数)
transform:skew(x-angle,y-angle)：参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0
（6）rotateX()函数用于指定元素围绕X轴旋转。
基本语法格式：transform:rotateX(a) 参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。
（7）rotateY()函数用于指定元素围绕Y轴旋转。
基本语法格式：transform:rotateY(a) 参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。
CSS变形效果实例：
<html>
<style>
#d1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
#d2{
width: 100px;
height: 100px;
background-color: burlywood;
transform: matrix(0,1,1,1,10,10); /*矩阵变换 */
transform: translate(100px,100px); /*相对于原位置进行x和y的位置移动 */
transform: scale(0.5); /*按照百分比进行缩放，例0.5表示对象是原来的百分之五十 */
transform: scaleX(0.8) /*表示x方向缩小百分之八十 */
transform：rotate(-90deg) /*旋转对象，参数为一个度数，表示旋转多少度.若为负数则是逆时针旋转，正数则是顺时针旋转 */
transform: skew(-20deg);
}
</style>
<body>
<div id="d1">盒子1</div>
<div id="d2">盒子2</div>
</body>
</html>CSS的动画效果
1、@keyframes animationname {
keyframes-selector{css-styles;}
}
animationname：表示动画名称
2、animation-name属性用于定义要应用的动画名称。
基本语法格式：animation-name: keyframename | none （none是初始值，意思为不应用任何动画，通常用于覆盖或者取消动画）
3、animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
基本语法格式：animation-duration: time （animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。）
4、animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。
基本语法格式：animation-timing-function:value
| 属性值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函数中自己的值。可能的值是从0到1的数值。 |
5、animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。
基本语法格式：animation-delay:time
6、animation-iteration-count属性用于定义动画的播放次数。
基本语法格式：animation-iteration-count: number | infinite （初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。）
7、animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。
基本语法格式：animation-direction: normal | alternate （初始值为normal，适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是“alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。）
CSS动画效果实例
<html>
<style>
img{
width: 300px;
animation-name: mymove;
animation-duration: 10s;
}
@keyframes mymove { /*创建动画，名称为mymove*/
from{transform:translate(0) rotateY(180deg);} /*动画开始时所处位置*/
50%{transform:translate(1000px) rotateY(180deg);} /*动画跑了1000像素转180度，即转身*/
51%{transform:translate(1000px) rotateY(0deg);}
to{transform:translate(0) rotateY(0deg);}
}
</style>
<body>
<img src="../media/动画图.gif">
</body>
</html>动画图：
以上是关于CSS插入音视频，过渡，变形，动画效果的主要内容，如果未能解决你的问题，请参考以下文章
HTML5新增多媒体属性（加入视频音频）CSS3高级应用（过渡变形动画）精灵图