css3

css3新属性

1. 边框：border-radius|box-shadow:10px 10px 5px #xxxxxx|border-image
2. 背景：background-size|background-origin:content-box/padding-box/border-box|允许多个背景图片：background-image：url(),url()|text-shadow|word-wrap：break-word允许文本换行
3. 字体：@font-face自定义字体
4. 伪类
   • :empty 没有子元素的element元素
   • :enable 选择每个已启动的元素
   • :disable 选择每个已禁止的元素
   • :chacked 选择每个被选中的元素
   • :target 选择当前活动的元素
5. 2D、3D转换transform
6. 过渡效果：transition
7. 动画animation，结合@keyframes使用

box-shadow

box-shadow: 10px 10px 5px 5px #xxx insert

• h-shadow: 水平阴影位置
• v-shadow：垂直阴影位置，与水平位置一样可为负，必选
• blur：模糊距离
• spread：阴影尺寸
• color：阴影颜色
• insert：内部阴影

css3 渐变：线性/径向渐变

• 线性渐变（(repeat-)linear-gradient）- 向下/向上/向左/向右/对角方向
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
  direction: to bottom right / xdeg
  color: color x% ：颜色中心所在的位置
• 径向渐变（(repeat-)radial-gradient）- 由它们的中心定义

动画 transform、transition、animation、

• 2D转换transform：translat(x,y)|rotate(30deg)|scale(x,y)缩放|skew(30deg,20deg)水平垂直翻转角度|matrix()2D方法组合
  • 3D转换：rotateX(120deg)|rotateY()|
• 过渡效果：transition-property:color background|transition-duration|transition-timing-function:sase/liner/ease-in/ease-out/ease-in-out/cubic-bezier（num,num,num,num）|transition-deley|
  简写：transition: property duration timing-function delay;
  过渡的属性，完成过度效果需要时间，速度曲线，延迟时间

 .one1{transition: width 3s linear 2s;}   
 .one1:hover{width:300px;} 

• animate动画：@keyframes规则：animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count:inifinite/number|animation-direction:normal/alternate动画播放方向|animation-play-state:running/paused元素动画播放状态
  animation的使用必须结合@keyframes animation-name使用

animation: name duration timing-function delay iteration-count direction; 
 @-webkit-keyframes  move {
         form{ left:0px;}   
         to{ left:200px;}
              }

区别：

1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。

• 贝塞尔曲线：cubic-bezier(n,n,n,n)自定义平滑曲线。贝塞尔曲线有4个点，左下为起始点P0坐标固定为(0,0)，右上为终点P3坐标固定为(1,1)，中间有两点P1和P2的坐标就是cubic-bezier(n,n,n,n)的参数。通过4条连起来的直线，生成平滑的曲线。
  linear是匀速过渡，ease是先快再慢的节奏，ease-in是加速冲刺的节奏，ease-out是减速到停止的节奏，ease-in-out是先加速后减速