Question

所以我试图与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/

Answer 1

给你的div一个id会有所帮助。因为如果你这样写，CSS会改变你网站上的所有div。

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

CSS3转换弄乱了布局？

1 个答案: