Css、Html5放大效果、img开箱即用

开箱即用的图像。看来我认为这样做不对。如果有人能帮忙，我会很高兴的。 非常感谢。 在这里你可以找到

}

}

---

通过删除

img

元素，而不是使用图像作为

.box

元素的背景，可以更好地实现此效果。然后在

background size

属性上使用

transition

下面是一个关于的工作示例。下面是示例代码

.box { 
  -webkit-transition: all 0.4s ease;
    width:210px;
    height:210px;
    border-radius:100%;
    border:3px solid yellow;
    background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
    background-size: 100%;
  }

.box:hover{
    -webkit-transition: all 0.4s ease;
    background-size: 150%;
}

---

问题似乎只出现在webkit浏览器上。我做了一些研究，发现边界半径属性破坏了尺度转换，我发现了这一点

您必须将-webkit mask image:放入父div以修复该问题

 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

编辑：请注意，背景尺寸是一项昂贵的操作——请参阅本文中关于修复4的内容。删除背景大小CSS属性，如果它减慢了您的网站

最后，您可以看到，使用scale（）css转换方法缩放图像比使用背景大小更平滑

EDIT2：上的代码更新

在Safari 5.1.7、Chrome、Mozilla、IE10、Opera、Opera Next上测试

正如您所见，Safari浏览器是唯一在第一次修复后出现问题的浏览器。对他来说，你需要设定

 -webkit-transform: translateZ(0); 

---

这还不是全部。您需要将边界错误分为两层，并用另一个div将其包装。在代码中，您可以在HTML和CSS文件中看到完整的修复

我同意你的看法，使用scale（）会更平滑，但在你的示例中，黄色边框会受到影响。我无法理解你的意思，那么黄色边框呢？这不是我的例子，这是你的。仅对代码进行更改，它添加了一行

-webkit mask image:-webkit径向渐变（圆形、白色、黑色）in.box类。圆圈的黄色边框。添加遮罩时，悬停时不正常。看看你更新的小提琴。我看不出有什么问题。一切正常-这是一个屏幕截图，你使用的是什么浏览器？Safari，我现在在Mozilla上测试过，非常完美。我需要为Safari添加一个特殊的webkit才能工作吗？现在悬停时边界消失。
.box { 
  -webkit-transition: all 0.4s ease;
    width:210px;
    height:210px;
    border-radius:100%;
    border:3px solid yellow;
    background: url('http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg') center center;
    background-size: 100%;
  }

.box:hover{
    -webkit-transition: all 0.4s ease;
    background-size: 150%;
}

 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

 -webkit-transform: translateZ(0);