Question

我有下一个代码：JSFiddle

<div class="wrap">
    <div class="item">
        <div class="image" style="background-image: url(http://loremflickr.com/800/800)"></div>
    </div>
</div>
<style>
.wrap {
    width: 500px;
}

.item {
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}

.image {
    backround-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transition: all .4s ease;
}

.item:hover .image {
    transform: scale(1.1)
}
</style>

如果你将鼠标放在照片上，然后离开，然后放，然后再次离开不是很快（等待过渡完成），有时图像是抽搐。看起来trnasition有时不起作用。

有谁知道，它有什么问题？

Answer 1

您的代码错误中包含语法：

backround-size: cover;
----^

这会导致定位故障

在Chrome中使用过渡抽搐进行转换

1 个答案: