HTML-动态

过渡

：让元素的动画发生平滑的效果，而不是生硬直接的效果
1:什么属性在做动画 transition-property: 属性1，属性2，属性n；
2：过渡时间需要多久 transition-duration:2s;
3：等待时间 transition-delay: 3s;
4：动画类型，不写默认匀速

	   5：综合写法  transition:过渡属性 过渡时间 等待时间 动画类型；

opacity:
   0;完全透明
	 取值0-1.完全透明到完全不透明，可以取小数

css3属性

，
预览版，还没有一个正式的最终版，有很多兼容性问题
浏览器不识别
浏览器为了使这些属性兼容，每一个浏览器产商都提供了一个属于自己的浏览器语法规则，
浏览器兼容前缀。
主流浏览器：
谷歌，火狐，苹果，欧朋，IE

浏览器前缀：

		    -webkit-   谷歌
			-moz-      火狐
			-ms-    	IE
			-o-       欧朋
	
	盒子阴影box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色；
	
css3渐变：由浏览器生成
   线性渐变：background:-webkit-linear-gradient(方向，颜色1，颜色2，颜色3);
        方向：right left top buttom    left top(左上角)  从哪开始
		     注意：需要添加兼容前缀
			 
		    到哪结束，不要添加兼容前缀
			 to left
			 to right
			 to top
			 to bottom
			 
	角度渐变：
	   10deg 10度
	   
	 默认情况下颜色均分
	    可以指定颜色分布的百分比，让颜色按照百分比进行渐变
		blue 10%
		red  10px 
		 
	径向渐变：一定要加浏览器前缀
	     从一个点到四周的渐变,默认从圆心到四周
		 background-webkit-radial-gradient(渐变位置，颜色)
	    渐变位置：left right top bottom  left top  10px距左 30px距上
       形状：
	       默认椭圆  ellipse
		   正圆     circle
		   注意：元素是正方形，则都是正方形
		   
	大小：
	  size：渐变的大小
	      
		  
		  
渐变重复：background:repeating-linear/radial-gradient()
       线性渐变：
	   径向渐变：
	   
	  补充：渐变用的背景属性是 background-image

css3中的2d属性

	      二维平面
	css3 2d属性
	    变形属性 transform
		
    2d变换：
	   位移  transform:translate(水平位移，垂直位移);
	         transform:translate(水平位移);
			 transform:translateX(水平位移)；
			 transform:translateY(垂直位移)；
			 默认情况，正值：从上往下，从左往右
			 
	   旋转   transform:rotate();
	        旋转是一个度数，deg，默认旋转点为中心
			transform-origin ： 设置旋转点；
			
	   
	   缩放    transform:scale();
	  
	  案例思路：1：基本布局结构txt1和txt2通过定位互相堆叠，使用边框缩放
	           2：初始状态是缩小为0看不见
			   3：鼠标移入放大到原来的1倍
			   4：加上过渡

transition:; 过渡 需要事件触发

animation 动画

不需要事件触发,使用关键帧就可以执行
1: 定义动画
from{}起始位置
to{}终点位置

				0%{}起始位置
				25%{}过程1
				...过程n
				100%{}	终点位置
				
			2: 调用动画
			animation-name:;关键帧名字 动画名
			animation-duration:;关键帧时长 总运动时间
			animation-delay:;关键帧延迟时间
			animation-iteration-count:;运动执行次数 
				数字	 数字为几,执行多少次 
				默认情况一次 
				infinite无限循环
			animation-direction:;动方向
				reverse	反向运动
				alternate	单数次,顺时针  偶数次,逆时针
				alternate-reverse 单数次,逆时针  偶数次,顺时针
			animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)
			animation-play-state:; 
				paused	暂停
				running	运动
				
			综合写法:
				animation:名字 运动时间 速度 延迟时间 次数;
			
		
	-->
	
	<!--
	1：图片默认在前面展示(初始不需要设置背面不可见)
	    鼠标移上去图片旋转到背面，设置

背面不可见

	2：文本默认在后面(初始旋转180deg)
	    鼠标移入，文字旋转到正面
	 -->
	 
	 <!-- 
	  animation:mz 2s; 调用关键帧，动画 不需要事件触发，使用关键帧就可以执行
	    1：定义动画  @keyframes mz{
			 from{}起始位置
			to{} 终点位置
			0%{}起始位置
			25%{}过程1
			。。。。过程n
			100%{}终点位置
			
		}
		2：调用动画
		  
			animation-iteration-count:infinite;无限循环，数字是循环次数
			animation-name:;关键帧名字，动画名
			animation-duration:;关键帧市场，总运动时间
			animation-delay:;关键帧延迟时间
			animation-direction:;运动方向
			                     reverse反向
			                     alternate先正后反，单数顺时针，偶数逆时针
								 alternate-reverse  单数逆时针，偶数顺时针
	       animation-timing-function:运动类型;加速，加速，贝塞尔曲线运动...
		   animation-play-state：状态;结合hover 
		            paused暂停
					running运动
		综合写法  animation:mz 3s 1s linear infinite reverse;
		                名字 时间 速度 延迟 次数；-->

css3景深 3D空间

	      观察物体的时候，近大远小
		  prespective:800px;
		 给父级添加：
		  prespective:800px;景深
		  形成3D空间
		  transform-style:preserve-3d ;
		  
		 设置观察点：perspective-origin:;
		 
		 background:rgba:(红，率，蓝，透明度)；
		   a:透明度0~1