css3页面过渡效果-CSS3浏览器前缀、背景大小、位置、渐变和过渡效果

CSS3 浏览器前缀

-多发性硬化症-

-ms-box-shadow IE浏览器独占

-莫兹-

-moz-box-shadow 基于 Gecko 的浏览器（例如 Firefox）

-o-

-o-box-shadow Opera浏览器独有

-webkit-

-webkit-box-shadow 基于 Webkit 的浏览器（例如 Chrome、Safari）

CSS3 优雅降级 渐进改进

渐进式改进（渐进式

增强）：首先为低级浏览器构建页面，完成基本功能，然后为中级浏览器进行功效、交互和附加功能，以达到更好的体验

优雅降级：从一开始就建立网站的完整功能css3页面过渡效果，然后针对浏览器进行测试和修补。 就像从 CSS3 开始一样

根据应用的特点创建应用，然后逐步对主流浏览器进行hack，使其能够在低版本浏览器上正常浏览。

.transition { /*渐进增强写法 从小到大*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

.transition { /*优雅降级写法 从大到小*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

CSS3背景渐变

Linear-gradient（线性渐变）和radial-gradient（径向渐变）：允许您显示两种或多种指定颜色之间的平滑过渡

线性渐变 - 下/上/左/右/对角径向渐变 -

由它们的中心定义

线性渐变

定义至少两个颜色节点

语法：

背景/背景图像：

线性渐变（2~多种颜色，颜色之间用冒号分隔）

Linear-Gradient（向方向[1到2二]，2~多种颜色，颜色之间用冒号分隔）

线性渐变**（度deg，2~多种颜色，颜色之间用冒号分隔）[从上开始，顺时针方向]**

添加浏览器内核：

-webkit-线性渐变（2~多种颜色，用冒号分隔）

-webkit-linear-gradient（方向[1到2两个]，2~多种颜色css3页面过渡效果，颜色之间用冒号分隔）[注：方向中没有to，是表示的方向]

-webkit-linear-gradient（度deg，2~多种颜色，用冒号分隔）[从右开始，逆时针]

径向渐变

语法：

背景/背景图像：

径向渐变（2到更多颜色）在颜色前面添加比例[从小到大顺序]

-webkit-radial-gradient（方向、颜色）

方向、形状、颜色

示例：背景：-webkit-radial-gradient（顶部，圆形，黑色5％，白色10％，黑色15％）；

重复渐变：重复[颜色必须是相同的比例，否则很难产生重复渐变的效果][百分比从小到大递增]

背景尺寸设置

background-size：需要调整背景图片的大小

四类：像素值【单视图设置固定像素值，高度会按比例变化】【两个第一长度第二高度】

百分比[单个/两个]

参考像素值：

cover：背景图片覆盖整个背景； contains：一侧充满，另一侧等比例，保持在div的范围内；

背景图像位置

background-clip：调整背景位置

content-box：将背景图片放入内容区域

padding-box：将背景图片置于内行间距范围内

border-box：将背景图像放置在边框内[默认]

过渡效应

transition-property：需要过渡的样式，默认为全部，

transition-duration：运动时间默认为0s

transition-delay：延迟时间默认为0s

transition-timing-function：移动模式默认ease

A.ease（慢、快、慢） B.线性（匀速） ease-in（加速） C.ease-out（减速）

D.ease-in-out（先加速后减速） E.cubic-bezier 贝塞尔曲线（x1,y1,x2,y2）

http://cubic-bezier.com F.steps() 实现关键帧逐帧动画功能

Transition可以直接写：Transition Style Motion Time Delay Time Motion Mode