CSS基础8-浏览器兼容与动画

==============================================================================

• 优雅降级：开始先针对高版本完成所有功能和酷炫效果，后面再单独针对低版本浏览器进行处理，以保证完成最基本的功能即可（向下兼容）

• 渐进增强：先针对低版本完成基本功能，然后再针对高版本浏览器加更多功能和酷炫效果

CSS3新增属性

===========================================================================

1. 文字阴影

   text-shadow:X偏移 Y偏移 模糊程度 颜色；

2. 盒子阴影

   box-shadow:X偏移 Y偏移 模糊程度 延伸半径 颜色 inset；

字体图标

=======================================================================

使用阿里巴巴矢量图标库

使用自定义字体

@font-face{font-family:"自定义字体名字" src:url("字体文字路径")}

具体方法：http://t.csdn.cn/Zd5rU

选择器

======================================================================

• 选中有attr的属性元素e e[attr]

• 选中有attr且属性值为v的元素e e[attr=“v”]

• 选中有attr且以v开头的元素e e[attr^=“v”]

• 选中有attr且以v结尾的元素e e[attr$=“v”]

背景渐变

=======================================================================

1. 线性渐变

   backgrond:linear-gradient(color1,color2)

   background:linear-gradient(color *%,color *%)

   background:linear-gradient(to 方向,color1,color2)

   background:linear-gradient(to 方向1 ，方向2,color1,color2)

   backgrond:linear-gradient(*deg,color1,color2)

   注：常见于纯色分离

效果：

.

代码:

box1{

width: 100px;

height: 100px;

background: linear-gradient(45deg,orange 30%,orangered 30%);

}

2. 径向渐变

   background:radial-gradient(color1,color2)

   background:radial-radient(ellipse|circle, color1,color2)

   backgrond:radial-gradient(color *%,color2 *%)

3. 重复渐变

   线性渐变 background:repeating-linear-gradient

   径向渐变 background:repeating-radial-gradient

过渡

=====================================================================

让数值可以数字化的属性，变化可以慢慢进行

transtion:过度属性 执行时间 延迟时间 变化的曲线；

动画

=====================================================================

定义动画

@keyframes 动画名{

0%{开始状态}

*%{中间状态}

100%{结束状态}

}

绑定，执行调用动画

animation:动画名 动画执行时间 延迟时间 执行次数 变化曲线 变化的方向；

变化曲线一些值：

| 值 | 变化 |

| :-: | :-- |

| ease | 缓缓启动，加速，缓缓慢下来（推荐使用） |

| linear | 速度一致 |

| ease-in | 缓缓启动，加速 |

| ease-out | 快速启动，减速 |

| ease-in-out | 与ease相同，中间加速不明显 |

| cubic-bezier() | 自定义曲线 |

| 更多变化曲线：https://cubic-bezier.com/#.25,.1,.25,1 | |