復制代碼代碼如下: html head style div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } /style /head body div /div p 請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。 /p p b 注釋： /b 本例在 Internet Explorer 中無效。 /p /body /html
TWO EG:
復制代碼代碼如下: html head style div { width:100px; height:100px; background:blue; transition-property:background; transition-duration:5s; /* Firefox 4 */ -moz-transition-property:background; -moz-transition-duration:5s; /* Safari and Chrome -webkit-transition-property:background; -webkit-transition-duration:5s;*/ transition:background 5s ease; /* Opera */ -o-transition-property:background; -o-transition-duration:5s; } div:hover { background:red; } /style /head body div /div p 請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。 /p p b 注釋： /b 本例在 Internet Explorer 中無效。 /p /body /html html教程
