CSS3过渡弄乱了布局

所以我试图与CSS3达成协议，并认为我会从过渡开始，因为这会给我的布局带来不错的效果，我使用了代码；

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:40px;
height:60px;
opacity:0.4;
background:black;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
div:hover
{
width:90px;
opacity:0.9;
}
</style>
</head>
<body>
<br>
<u><b><center>TEST</center></b></u>
<div></div>
</body>
</html>
<br>

每当我使用该代码时，布局都会完全弄乱我几乎一无所有，只是过渡和错误的位置。谁能发现编码有任何问题？

[编辑]发生了什么事-http：//testingforsite.weebly.com/

给您的Div ID会有所帮助。因为如果这样写的话，CSS会更改您网站上的所有divs。

html：

<div id="div-of-transition"></div>

CSS：

#div-of-transition{
   transition:all 2s;
   -moz-transition:all 2s; /* Firefox 4 */
   -webkit-transition:all 2s; /* Safari and Chrome */
   -o-transition:all 2s; /* Opera */

这只会更改您名为div-of-transition

的Div

相关内容

最新更新

热门标签：