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

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

这个效果可以通过移除img元素来更好的实现，而是在.box元素上使用图片作为背景。然后在background-size 属性上使用transition。

这是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%;
}

Answer 2

看来问题只出在 webkit 浏览器上。在发现边界半径属性使比例转换崩溃后，我做了一些研究，我发现了这个

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 文件中看到完整的修复。