css过渡2D变幻.docx

1、css过渡2D变幻1 背景颜色过度 transition body background-color: deepskyblue; h1 font-size: 16px; .test overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; .test li float: left; width: 100px; height: 100px; margin: 0 5px; border: 1px solid #ddd; background-color: #eee; text-align: center; -mo

2、z-transition: background-color .5s ease-in; -webkit-transition: background-color .5s ease-in; -o-transition: background-color .5s ease-in; -ms-transition: background-color .5s ease-in; transition: background-color .5s ease-in; .test li:nth-child(1):hover background-color: #bbb; .test li:nth-child(2)

3、:hover background-color: #999; .test li:nth-child(3):hover background-color: #630; .test li:nth-child(4):hover background-color: #090; .test li:nth-child(5):hover background-color: #f00; 请将鼠标移动到下面的矩形上： 背景色过渡 背景色过渡 背景色过渡 背景色过渡 背景色过渡 2 延迟时间 transition-delay !- 描述：检索或设置对象延迟过渡的时间。 如果提供多个属性值，以逗号进行分隔。 语法：

4、 transition-delay： , * 默认值：0 取值： ： 指定对象过渡的延迟时间 - body background-color: deepskyblue; h1 font-size: 16px; .test overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; .test li width: 220px; height: 100px; margin: 1px 5px; padding: 10px; border: 1px solid #ddd; background-color: #eee;

5、 color: #000; -moz-transition-property: all; -moz-transition-duration: .5s; -moz-transition-timing-function: ease; -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease; -o-transition-property: all; -o-transition-duration: .5s; -o-transition-tim

6、ing-function: ease; -ms-transition-property: all; -ms-transition-duration: .5s; -ms-transition-timing-function: ease; transition-property: all; transition-duration: .5s; transition-timing-function: ease; .test li:nth-child(1) -moz-transition-delay: .1s; -webkit-transition-delay: .1s; -o-transition-d

7、elay: .1s; -ms-transition-delay: .1s; transition-delay: .1s; .test li:nth-child(2) -moz-transition-delay: .3s; -webkit-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; .test li:nth-child(3) -moz-transition-delay: .5s; -webkit-transition-delay: .5s; -

8、o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; .test li:nth-child(4) -moz-transition-delay: .7s; -webkit-transition-delay: .7s; -o-transition-delay: .4s; -ms-transition-delay: .4s; transition-delay: .7s; .test li:nth-child(5) -moz-transition-delay: .9s; -webkit-transition

9、-delay: .9s; -o-transition-delay: .9s; -ms-transition-delay: .9s; transition-delay: .9s; .test li:hover border-color: #999; background-color: #bbb; color: #999; 请将鼠标移动到下面的矩形上： 延迟0.1s后开始过渡 延迟0.3s后开始过渡 延迟0.5s后开始过渡 延迟0.7s后开始过渡 延迟0.9s后开始过渡 3 对象过度时间 transition-duration !- 描述：检索或设置对象过渡的持续时间。 如果提供多个属性值，以逗号

10、进行分隔。 语法： transition-duration： , * 默认值：0 取值： ： 指定对象过渡的持续时间 - body background-color: deepskyblue; h1 font-size: 16px; .test position: absolute; left: 8px; width: 200px; height: 100px; margin: 0 5px; padding: 10px; border: 1px solid #ddd; background-color: #eee; color: #000; -moz-transition-property:

11、left; -moz-transition-duration: .5s; -moz-transition-timing-function: ease-in; -webkit-transition-property: left; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease-in; -o-transition-property: left; -o-transition-duration: .5s; -o-transition-timing-function: ease-in; -ms-tran

12、sition-property: left; -ms-transition-duration: .5s; -ms-transition-timing-function: ease-in; transition-property: left; transition-duration: .5s; transition-timing-function: ease-in; .test:hover left: 100px; 请将鼠标移动到下面的矩形上： 矩形在0.5s内慢慢向右移动transition-duration:.5s; 4 颜色过度 transition-property !- 描述：检索或设

13、置对象中的参与过渡的属性。 默认值为：all。默认为所有可以进行过渡的css属性。 如果提供多个属性值，以逗号进行分隔。 语法： transition-property：all | none | , * 默认值：all 取值： all： 所有可以进行过渡的css属性 none： 不指定过渡的css属性 ： 指定要进行过渡的css属性 - body background-color: deepskyblue; h1 font-size: 16px; .test overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: no

14、ne; .test li float: left; width: 170px; height: 100px; margin: 0 5px; padding: 10px; border: 1px solid #ddd; background-color: #eee; color: #000; -moz-transition-property: border-color, background-color, color; -moz-transition-duration: .5s; -moz-transition-timing-function: ease-in; -webkit-transiti

15、on-property: border-color, background-color, color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: ease-in; -o-transition-property: border-color, background-color, color; -o-transition-duration: .5s; -o-transition-timing-function: ease-in; -ms-transition-property: border-color

16、, background-color, color; -ms-transition-duration: .5s; -ms-transition-timing-function: ease-in; transition-property: border-color, background-color, color; transition-duration: .5s; transition-timing-function: ease-in; .test li:hover border-color: #999; background-color: #bbb; color: #999; 请将鼠标移动到

17、下面的矩形上： 本次设置过渡的属性： border-color, background-color, color 4 动画类型 transition-timing-function !- 描述：检索或设置对象中过渡的动画类型。 如果提供多个属性值，以逗号进行分隔。 语法： transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier

18、(, , , ) * 默认值：ease 取值： linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在0, 1区间内 - body backg

19、round-color: deepskyblue; h1 font-size: 16px; .test overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; .test li position: relative; left: 8px; width: 220px; height: 100px; margin: 1px 5px; padding: 10px; border: 1px solid #ddd; background-color: #eee; color: #000; -moz-transitio

20、n-property: left; -moz-transition-duration: .5s; -webkit-transition-property: left; -webkit-transition-duration: .5s; -o-transition-property: left; -o-transition-duration: .5s; -ms-transition-property: left; -ms-transition-duration: .5s; transition-property: left; transition-duration: .5s; .test li:

21、nth-child(1) -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear; transition-timing-function: linear; .test li:nth-child(2) -moz-transition-timing-function: ease; -webkit-transition-timing-

22、function: ease; -o-transition-timing-function: ease; -ms-transition-timing-function: ease; transition-timing-function: ease; .test li:nth-child(3) -moz-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; transition-timing-function: ease-in; .test li: