第25章CSS3过渡效果-水之原

学习要点：

1.过渡简介

2.transition-property

3.transition-duration

4.transition-timing-function

5.transition-delay

6.简写和版本

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS3 的过渡效果，通过这个功能可以不借助 JavaScript 来实现简单的用户交互功能。

一．过渡简介

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：

属性

说明

transition-property

指定过渡或动态模拟的 CSS 属性

transition-duration

指定完成过渡所需的时间

transition-timing-function

指定过渡的函数

transition-delay

指定过渡开始出现的延迟时间

transition

简写形式，按照上门四个属性值连写

我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

//设置元素样式

 div  { 
    width :  200px ; 
    height :  200px ; 
    border :  1px solid green ;
} 

查看更多关于第25章CSS3过渡效果-水之原的详细内容...