实例代码“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: 2s;
12
-webkit-transition-property: width; /* Safari */
13
-webkit-transition-duration: 2s; /* Safari */
14
}
15
div:hover
16
{
17
width:300px;
18
}
19
</style>
20
</head>
21
<body>
22
​
23
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
​
25
<div></div>
26
​
27
<p>Hover over the div element above, to see the transition effect.</p>
28
​
29
</body>
30
</html>
31