10

我正在尝试实现我最近看到的效果，其中背景图像在悬停时放大。我几乎用这里的例子做到了：https ://jsfiddle.net/qyh6nbwt/但它似乎很不稳定（你会明白我的意思，将鼠标悬停在它上面），我在 osx 上运行最新的 chrome 版本，有尚未在其他浏览器中检查它。有没有办法让它更平滑，所以它不会在放大时“摇晃”？

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}
4

3 回答 3

6

只需使用变换，缩放。

所以不要将 bg 图像设置为 160% 使用

transform:scale(1.5);

您可以在此处找到有关转换 css 属性的一些信息

要在您的情况下使用变换比例，您将需要一个隐藏溢出的包装器，因此只有内部 div 变得更大并被外部 div 切割。

查看更新的小提琴。

问候蒂米

于 2015-05-13T15:07:28.443 回答
1

使用变换比例而不是背景大小变化过渡：https ://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);
于 2015-05-13T15:10:50.340 回答
1

所以我把这个作为我的任务来解决这个问题，结果发现它并不像我想象的那么简单。

这有点脏，但你需要像这样构建你的div内部div：

<div class="example">
    <div></div>
    <p>test</p>
</div>

然后从这里，您可以更准确地定位缩放，如下所示：

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.example:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

scale您可以使用和transition属性调整缩放和速度。

这是一个要演示的工作小提琴。希望这会有所帮助，我检查了 Chrome/Safari/Firefox，它似乎工作得很好。

于 2015-05-13T15:23:16.113 回答