实例代码“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:width 1s linear 2s;
11
/* Safari */
12
-webkit-transition:width 1s linear 2s;
13
}
14
​
15
div:hover
16
{
17
width:200px;
18
}
19
</style>
20
</head>
21
<body>
22
​
23
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
24
​
25
<div></div>
26
​
27
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
28
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
29
​
30
</body>
31
</html>
32