CSS:层叠样式表（四）【多媒体和动画】

1、嵌入多媒体：

图像、视频、音频

(1)图像：

      A、把图像作为背景：background-image
	  
	  B、使用图像标签：<img src="图像名" alt="" width="" height="" />

(2)视频

	  A、视频格式：.mp4 .ogg  .webm
	  
	  B、视频标签：<video src="视频文件名" controls="controls"/>
	  
	        src：视频文件全路径名
			
	        controls：显示播放控制按钮
		
		    autoplay：自动播放(页面加载完成后)
		 
		    loop 的作用：循环播放    
	  
	        preload：页面加载时，预播放视频。若使用了autoplay则该属性忽略
			
			poster：当视频缓存不足时，按比例显示该属性指定的图像

(3)音频：

      A、音频格式： .mp3  .ogg  .wav  .avi	

      B、音频标签：<audio src="" controls="controls"><audio>	

          src：音频文件的全路径名

		  controls：显示播放控制按钮
		  
		  autoplay：页面载入完成后自动播放音频
		  
		  loop：循环播放
		  
		  preload：页面加载时，预播放音频。若使用了autoplay则该属性忽略
		  
	(4)source指定多个备用的音视频文件
	
	    <audio controls="controls">
		   <source  src="文件全路径名" type="文件类型">
		   <source  src="文件全路径名" type="文件类型">
		   <source  src="文件全路径名" type="文件类型">
		   ......
		</audio>

2、过渡：

    (1)transition-property :使用过渡效果的CSS属性名
	
	   none : 没有过渡效果
	   
	   all : 所有属性都获得过渡效果
	   
	   property：定义应用过渡效果的属性名称，若是多个属性，属性之间用逗号隔开
	   
	   
    (2)transition-duration: 指定对象过渡的持续时间
	
	(3)transition-timing-function：过渡效果的速度曲线
	
	     linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 
		 
         ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) --- 默认
		 
         ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
		 
         ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
		 
         ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
		 
         cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 

    (4)transition-delay：过渡的延迟时间
	
	(5)transition：property duration timing-function delay;

3、变形：

transform：none | transform-functions;

     none：表示不变形
	 
	 transform-functions：表示变形函数
	 
	 2D变形函数：
        
		transform: matrix(0,1,1,1,10,10); /* 矩阵变形 */
		
		transform: translate(100px,-10px); /* 平移：给定的x轴、y轴坐标进行平移*/
		
		transform: rotate(30deg); /*旋转：按给定的度数进行旋转*/
		
		transform: scale(.8); /*缩放变形*/
		
		transform: skew(-25deg); /*斜切变形*/

4、动画：

    (1)创建动画：
   
      @keyframes  动画名称{
	      
		   @keyframes-selector { css-styles }
	  }

       keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，
	   
	   值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，
	   
	   to和100%效果相同表示动画的结束。
	   
	   css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，
	   
	   多个属性之间用分号分隔，不能为空。
	   
	(2)使用animation-name属性使用定义好的动画
	
	(3)使用animation-duration属性设置动画完成所需要的时间(时间单位可以是秒(s),也可以是毫秒(ms))