Question

＆＃13;

.tricky {

width:200px; 
height:200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display:inline-block;
position:relative;
 overflow: hidden;

}

.tricky_image {
width:100%; 
height:100%;
-moz-transition: all .6s ease; 
-webkit-transition: all .6s ease;  
-ms-transition: all .6s ease;  
-o-transition: all .6s ease;  
transition: all .6s ease; 
opacity:0.7;
border-radius: 50%;
filter:alpha(opacity=70);
overflow:hidden;

}

.tricky_image:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale(1.2);
transform:scale(1.2);

 }

＆＃13;

<!doctype html>
<html>
<head>
</head>
<body>

<div class="tricky">  
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">  
</div>  


</body>
</html>

＆＃13;

我想要的效果只适用于Firefox，我假设IE。我开始使用带有蓝色背景的div包装器的透明图像。当用户将鼠标悬停在图像上时，我希望它放大并将不透明度恢复到100％而不会破坏div包装器的设置宽度和高度。这在Firefox中完美运行，但是当我在Chrome中运行动画时，图像超出了它背后的蓝色div包装器的宽度。这是我的代码，任何帮助将不胜感激＆amp; JS小提琴http://jsfiddle.net/yaLupdzo/1/：

<!doctype html>
<html>
<head>
<style>

.tricky {

width:200px; 
height:200px;
border-radius: 50%;
border: 0px solid;
background: #2373bd;
display:inline-block;
position:relative;
 overflow: hidden;

}

.tricky_image {
width:100%; 
height:100%;
-moz-transition: all .6s ease; 
-webkit-transition: all .6s ease;  
-ms-transition: all .6s ease;  
-o-transition: all .6s ease;  
transition: all .6s ease; 
opacity:0.7;
border-radius: 50%;
filter:alpha(opacity=70);
overflow:hidden;

}

.tricky_image:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale(1.2);
transform:scale(1.2);

 }





</style>
</head>
<body>


<div class="tricky">  
<img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">  
</div>  


</body>
</html>

Answer 1

这是此处提交的已知问题：https://code.google.com/p/chromium/issues/detail?id=157218

在Webkit中，通过硬件加速，动画图层会在动画期间升级到不同的渲染表面，然后在动画完成后降级。

原来有一个简单的解决方案。让容器元素得到提升＆＃39;通过向它添加一个轻量级动画到与硬件加速子相同的渲染层：

.tricky {
    width: 200px; 
    height: 200px;
    border-radius: 50%;
    border: none;
    background: #2373bd;
    display: block;
    overflow: hidden;
    -webkit-transform:scale(1.0);
}

.tricky_image {
    width: 200px; 
    height: 200px;
    -webkit-transition: all .6s ease;
    opacity: 0.7;
}

.tricky:hover {
    -webkit-transform:scale(1.0);
}

.tricky:hover .tricky_image {
    opacity: 1;
    -webkit-transform:scale(1.2);
 }

请参阅：http://jsfiddle.net/yaLupdzo/3/

请注意，我还在父容器的默认状态中添加了一个简单的动画，这样在悬停时也不会发生同样的问题。

Answer 2

  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);

您可以像浏览器兼容性那样重复代码。

转换比例属性不适用于Chrome＆amp;苹果浏览器

2 个答案: