基本上,当我将鼠标悬停在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%);
  }

09-10 10:25
查看更多