CSS3新特性

CSS3 盒子模型

box-sizing属性

• content-box 盒子大小为width+padding+margin
• border-box 盒子大小为width
  *前提是padding和border不会超过width宽度

CSS3 滤镜filter

filter: blur(4px); 小括号里的数值越大越模糊

CSS3 calc函数

width: calc(100% - 30px);
表示比父盒子少30像素

CSS3 过渡 transiton

transiton:要过渡的属性 花费时间 运动曲线 何时开始;

进度条案例
html

	    <!--进度条案例-->
	    <div class="bar">
	    	<div class="bar-in"></div>
	    </div>

css

			.bar {
				width: 150px;
				height: 15px;
				border: 1px solid red;
				border-radius: 50px;
				padding: 1px;
			}
			.bar-in {
				width: 50%;
				height: 100%;
				background: red;
				transition: width 1s ease 0s;
			}
			.bar:hover .bar-in {
				width: 100%;
			}

CSS3 2D转换之移动 transform: translate(x,y);

2D移动，改变元素位置，类似定位

transform: translate(x,y);
x是在x轴上移动位置，y是在x轴上移动位置,逗号分隔

transform: translate(0,100px);
=transform: translateY(100px);

特点：
优点：不会影响其他元素的位置
translate中百分比单位是相对自身的 translate(50%,50%);
对行内标签没有效果

常用来配合绝对定位 使子盒子垂直居中
position: absolute;
top: 50%;
left: 50%;
translate(-50%, -50%);

CSS3 2D转换之旋转 transform: rotate(0deg);

transform: rotate(45deg); 顺时针旋转45°

转换中心点 transform-origin

默认为50% 50%或center center

1. 可用方位名词表示
   transform-origin: left bottom;

2. 可以用px表示
   transform-origin: 50px 50px ;

CSS3 2D转换之缩放 scale

transform: scale(x,y);

1. 括号里面写数字 表示倍数（宽度，高度）
2. 等比例缩放 transform: scale(2); transform: scale(0.5);
3. 优势：不会影响其他盒子 且可以设置缩放的中心点

CSS3 动画 animation

1. 用@keyframes定义动画
2. 给元素引入动画

@keyframes move {
		0% {
			transform: translate(0,100px)
		}
		100% {
			transform: : translate(100px,100px)
		}
}

div {
		animation-name: move;
		animation-duration: 2s;
		animation-delay: 1s; /*延迟时间*/
		animation-iteration-count: infinite; /*循环次数 infinite无限次*/
		animation-direction: alternate; /*是否反方向播放*/
}

注意：
百分比为整数 表示对总时长的划分