基本上,当我将鼠标悬停在div上时,我会使用transform来增加缩放比例。该div具有边界半径,并且在缩放时会变得模糊。在JSFIDDLE示例中,模糊消失了,但是在我的本地主机站点上,模糊仍然存在。
这只是发生在我的屏幕上,还是其他人也看到了?
JSFIDDLE链接https://jsfiddle.net/3arynm5v/
的HTML
<div class="circle">
<div class="circle--inner"></div>
<div class="circle--outer"></div>
</div>
SCSS
.circle {
width:300px;
height:300px;
background:black;
position:relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
&:hover &--inner {
transform:scale(7);
}
&--inner, &--outer {
position:absolute;
margin:0 auto;
left:0; right:0;
top:50%;
transform:translateY(-50%);
border-radius:200%;
}
&--inner {
width:10px;
height:10px;
background:white;
transition:transform 1s;
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
&--outer {
width:30px;
height:30px;
border:5px solid white;
}
}
最佳答案
变换所做的是获取现有大小并放大它。您可以做的是在宽度和高度上设置&-内部:70像素(10像素乘以转换后的缩放系数7)。将其放置在中间,而不是将其悬停放大7倍,而应在普通视图上按比例缩小。
我更新了小提琴向您展示了我的意思。 https://jsfiddle.net/3arynm5v/3/
如您所见,我已将外部和内部编辑为:
&:hover &--inner {
transform:translate(0, -50%)scale(1);
top: 50%;
}
&--inner, &--outer {
position:absolute;
margin:0 auto;
left:0; right:0;
top:50%;
border-radius:200%;
}
&--inner {
width:70px;
height:70px;
background:white;
transition:transform 1s;
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
transform: translate(0, -50%)scale(.1);
}
&--outer {
width:30px;
height:30px;
border:5px solid white;
transform:translateY(-50%);
}