课堂小笔记2

    2D转换
	单独设置X或Y时，不能一起单个设置，否则只会执行最后设置的轴移动 
	 **transform**
	 transform: translate(20px,50px);移动的位置是沿X轴和Y轴移动
	 两个值之间用逗号分隔,可以设置一个值，表示X轴的移动,
	 为正值时沿x轴和Y轴的正值方向，负值为相反方向
	 **translate移动**
	 transform: rotate(30deg)必须使用角度单位deg;
	 正值时为顺时针旋转，负值为相反方向
	 **rotate旋转**
	 transform: scale(2,3);第一个参数缩放是X轴（宽度），
	 第二个参数缩放是Y轴（高度）
	 X轴为负值时，沿Y翻转当前元素
	 Y轴为负值时，沿X翻转当前元素
	 **scale缩放**
	 transform: skew(20deg,0deg);单位是角度deg
	 第一个值为X轴，第二个值为Y轴
	 正值为顺时针倾斜，负值则相反
	 倾斜会拉伸当前元素大小
	 **skew倾斜**
	 transform: matrix(1,2,-2,1,2,1);
					  X缩放,Y轴倾斜,X轴倾斜,Y轴缩放,X轴平移,Y轴平移
	 不需要添加单位
	 matrix 2D转换简写形式
	 transform-origin: 10px 50px;改变旋转中心点，可以为上下左右，%，px
	 transform-style: preserve-3d;呈现3D空间
	 perspective: 200px;设置3D透视图，值越小，成像越大
	 backface-visibility:visible;默认状态能看见反面，
	 设置为hidden反面内容及颜色不能看见
	 <div class="box1">2222
		<div class="box2">1111</div>
	</div> 
	
	 过渡transition:css属性名称 过渡的时间(s,ms,1s=1000ms) 运动的曲线 开始等待的时间
	 ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
	 ease-in	规定以慢速开始的过渡效果
	 ease-out	规定以慢速结束的过渡效果
	 ease-in-out	规定以慢速开始和结束的过渡效果

     **动画**
	 @keyframes创建一个动画
	 创建动画可以使用from....to代表0%....100%
	 
	 animation：name duration timing-function 
	 delay iteration-count 
	 direction fill-mode play-state简写形式
	 
	 animation-name: name;设置动画名称
	 animation-duration: 2s;设置动画运动的时间
	 animation-fill-mode: forwards;动画停止的位置
	 animation-timing-function: ease;设置动画运动的曲线
	 forwards停止在最后一帧动画
	 backwards停止在第一帧动画
	 both最后运动的位置，就是停留的位置
	 animation-delay: 2s;动画开始时间(什么时候开始)
	 animation-iteration-count: 2;动画执行的次数
	 infinite无限循环
	 animation-direction: normal;
	 reverse反向
	 alternate奇数正向播放，偶数反向播放
	 alternate-reverse奇数反向播放，偶数正向播放
	 animation-play-state: paused;（轮播原理的暂停和播放）设置动画是否播放或暂停
	 paused暂停
	 running开始-->
	 <!-- <div class="box1"></div> -->
	 <!-- 分页 -->
	 <!-- <ul class="uls">
	 	<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	 </ul> -->
	  autoplay设置视频立马播放（加载完成以后）
	  controls设置播放的进度条和按钮等
	  width和height可以设置播放的宽度高度，值可以为带单位和不带单位
	  loop循环播放
	  muted设置视频播放时静音播放
	  poster设置视频播放的封面
	  preload页面加载时加载播放视频，如果出现autoplay，那么preload就会失效-->
	 <video src="./image/movie.mp4" poster="./image/1.png" width="300px" height="200" controls muted>
	 	<!-- <source src="./image/movie.mp4" type="video/mp4"></source> -->
	 </video>
	 <audio src="" ></audio>

    <!-- input -->
	<!-- text文本 -->
	<input type="text">
	<!-- button按钮 -->
	<input type="button"/>
	<!-- password密码 -->
	<input type="password">
	<!-- number数字 -->
	<input type="number">
	<!-- color颜色 -->
	<input type="color">
	<!-- date选择日期 -->
	<input type="date">
	<!-- datetime选择日期时间 只支持苹果和opear -->
	<input type="datetime">
	<!-- datetime-local选择日期时间 只支持谷歌,苹果和opear-->
	<input type="datetime-local">
	<!-- email邮箱 -->
	<input type="email">
	<!-- month月 -->
	<input type="month">
	<!-- range可调节输入区域 -->
	<input type="range" max="10" min="5">
	<!-- search搜索域 （多了可全部删除符号）-->
	<input type="search">
	<!-- tel电话，不兼容5大浏览器 -->
	<input type="tel">
	<!-- time时间 -->
	<input type="time">
	<!-- url设置网址 -->
	<input type="url">
	<!-- week第几周 -->
	<input type="week">
	<!-- submit提交 -->
	<input type="submit">
	<hr>
	<!-- disabled禁止 -->
	<!-- max最大值
	 min最小值通常使用在number类型或range
	 maxlength最大输入长度，通常与text和password
	 minlength最小输入长度
	 pattern设置正则表达式验证
	 readonly只读模式
	 required设置必填项
	 size设置input的显示宽度，默认值为20
	 step设置number字符间隔为XX，默认间隔为1-->
	<form >
		<input type="number" >
		<input type="submit"/>
	</form>