CSS3动画1_css3 donghua1

目录

1.阴影(text-shadow,box-shadow)

2.浏览器前缀

3.优雅降级渐进增强

4.渐变(gradient)

5.过渡属性(transition)

---

1.阴影(text-shadow,box-shadow)

text-shadow(文本阴影):10px(水平阴影距离) 10px(垂直阴影距离) 10px(模糊距离) red(阴影颜色);

Box-shadow(盒子阴影):10px(水平阴影距离) 10px(垂直阴影距离) 10px(模糊距离) 10px(模糊大 小) red(阴影颜色);第六个属性为内外阴影，为空时是外阴影，inset内阴影。

水平阴影距离与垂直阴影距离为必填项，给负数则是反方向，默认右，下。

多个阴影用逗号隔开

2.浏览器前缀

-ms-     -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀

-moz-    -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS 属性需添加-moz-前缀

-o-     -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀

-webkit-   -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属 的CSS需添加-webkit-前缀

3.优雅降级渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

 

4.渐变(gradient)

linear-gradient(线性渐变)

radial-gradient(径向渐变)

5.过渡属性(transition)

transition(复合属性):过渡时间必填，延迟时间在其后面，其他无顺序

transition-property：过渡样式，默认为all所有属性

transition-duration：过度时间

transition-delay：延迟时间

transition-timing-function:过渡的时间曲线，ease(默认，慢速开始，然后变快，然后慢速结束），linear:(匀速),  ease-in: (加速) ，ease-out:(减速)，ease-in-out:(先加速后减速) , cubic-bezier: 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com ，steps(): 逐帧开始动画的功能