0

我正在测试 CSS3，现在我正在尝试使用过渡。这是我正在开发的网站。如果将鼠标悬停在顶部的第一个方块上，它会向左过渡。问题是，由于第一个方格移动，有一个空白空间，其他方格正在向它移动。我希望这些方块在物体移动时保持静止。有什么办法吗？

CSS

.container {
    margin: 0px auto;
    border: 2px;
    width: 545px;
    height: auto;
}

.title {
    margin: 0px auto;
    width: 600px;
    height: auto;
    text-align: center;
}

.elemento1 {
    float: left;
    width: 266;
    height: auto;
}

.elemento2 {
    float: right;
    width: 266;
    height: auto;
}

.foot {
    clear: both;
}

p.padding {
    padding-bottom: 15px;
    padding-top: 15px;
}

.anim {
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;
}

.anim:hover {
    width:100px;
    height:100px;
    transform: translate(-50px,0px);
    -ms-transform: translate(-50px,0px); /* IE 9 */
    -webkit-transform: translate(-50px,0px); /* Safari and Chrome */
    -o-transform: translate(-50px,0px); /* Opera */
    -moz-transform: translate(-50px,0px); /* Firefox */
}
4

1 回答 1

3

您需要做的是将动画元素放在一个包装元素中，该元素已经包含足够的空白空间供您的动画四处移动。这样它会在包裹元素内部移动，而不是撞到邻居。

于 2013-01-31T22:36:55.160 回答