Question

开箱即用的图片。似乎我认为这不是正确的。如果有人可以提供帮助，我会很高兴。谢谢！在这里您可以找到Demo

.box { 
width:210px;
height:210px;
border-radius:50%;
border:3px solid yellow;
cursor: default;
overflow: hidden;

}

img{
overflow: hidden;
width:210px;
height:210px;
z-index:-1;
display: block;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;

}

.box:hover img{
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
}

Answer 1

似乎问题仅出现在webkit浏览器上。在捕获到border-radius属性导致规模转换失败后我做了一些研究，我发现了这个

overflow:hidden ignored with border-radius and CSS transforms (webkit only)

你必须把-webkit-mask-image：放到父div来修复它。

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

http://jsfiddle.net/Jx8xF/16/

编辑：请注意，背景大小是昂贵的操作 - 请参阅有关修复4的这篇文章。如果它减慢了您的网站，请删除背景大小的CSS属性 http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/

最后你可以看到，使用scale（）css过渡方法比使用background-size

更加平滑。

EDIT2：http://jsfiddle.net/Jx8xF/19/上的代码更新

在Safari 5.1.7，Chrome，Mozilla，IE10，Opera，Opera Next上进行测试

正如您所看到的，Safari浏览器只是在首次修复后遇到问题。对他来说你需要设置

 -webkit-transform: translateZ(0);

并非全部。您需要为边框错误分组两个图层，并用另一个div包装它。在代码中，您可以看到HTML和CSS文件中的完整修复。

Answer 2

通过删除img元素，而不是将图像用作.box元素的背景，可以更好地实现此效果。然后在transition属性上使用background-size。

以下是CodePen的工作示例。示例代码如下。

.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%;
}

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

2 个答案: