多媒体嵌入及css高级应用

       在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。
     运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件。下图是各大主流浏览器对video和audio标签的支持情况。

一：图像

A、图像作为背景

使用background-image设置属性。

B、使用图像标签

<img src="图像名" alt="" width="" height="" />

二：视频

1：视频格式

2：video标签

<video src="视频文件名" controls="controls"/>	  

属性	描述
src	视频文件的全路径名
controls	显示播放控制按钮
autoplay	页面载入后完成后自动播放
loop	循环播放
preload	页面加载时，预播放视频。若使用了autoplay则该属性忽略
poster	视频缓冲不足时加载一个图片显示

三：音频

1：音频格式

2：audio标签

<audio src="" controls="controls"><audio>	 

属性	描述
controls	显示播放控制按钮
autoplay	页面载入后完成后自动播放
loop	循环播放
preload	页面加载时，预播放音频。若使用了autoplay则该属性忽略

四：过渡

1：transition-property

transition-property属性有下面三个取值：

2：transition-duration

该标签表示过渡时间，以秒或毫秒为单位。

3：transition-timing-function

该标签表示过渡效果的速度曲线，有以下取值：

4：transition-delay

该标签表示过渡效果的延迟时间，以秒或毫秒为单位。

5：transition

transition为复合属性，可以四个同时设置。顺序为：property–>duration–>timing-finction–>delay

五：变形

1：矩阵变形–matrix

语法格式：transform:matrix(1,2,3,1,2,3);
基于X和Y的坐标重新定义元素位置

2：扭曲–skew

语法格式：transform:skew(30deg);
倾斜元素对象，取值为一个度数（如30deg）。

3：平移–translate

语法格式：transform:translate(X,Y);
translateX只对应X轴平移，translateY只对应Y轴平移。

4：旋转–rotate

语法格式：transform:rotate:(30deg);
取值为一个度数，表示与水平线的夹角。

5：缩放–scale

语法格式：transform:scale:(0.8,0.8);
取值为数字，对应缩放到原来大小的多少倍。

六：动画

1：创建动画

  @keyframes  动画名称{
		                @keyframes-selector { css-styles }
		              }

keyframes-selector	指定当前关键帧要应用到整个动画过程中的位置
css-styles	定义执行到当前关键帧时对应的动画状态

keyframes-selector：关键帧选择器，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。

2：使用动画

 animation-name：动画名称；
 animation-duration：2s;

animation-duration属性设置动画完成所需要的时间，单位可以是秒也可以是毫秒,不能为空。

3：动画时间属性

animation-timing-function	速度曲线
animation-delay	延迟时间，默认为0
animation-direction	是否逆向播放
animation-iteration-count	是否循环播放

完整创建使用动画例子代码：