实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
div
6
{
7
width:100px;
8
height:100px;
9
background:red;
10
transition-property:width;
11
transition-duration:1s;
12
transition-timing-function:linear;
13
transition-delay:2s;
14
/* Safari */
15
-webkit-transition-property:width;
16
-webkit-transition-duration:1s;
17
-webkit-transition-timing-function:linear;
18
-webkit-transition-delay:2s;
19
}
20
​
21
div:hover
22
{
23
width:200px;
24
}
25
</style>
26
</head>
27
<body>
28
​
29
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
30
​
31
​
32
​
33
<div></div>
34
​
35
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
36
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
37
​
38
</body>
39
</html>
40