Question

基本上，当我将鼠标悬停在div上时，我会通过变换增加比例。这个div有一个边界半径，当它缩放时，它变得模糊。在JSFIDDLE示例中，模糊发生然后消失，但在我的localhost网站上，它仍然模糊。

它刚刚发生在我的屏幕上，还是其他人也看到了这个？

JSFIDDLE LINK 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;
  }
}

Answer 1

变换的作用是采用现有尺寸并放大它。您可以做的是在宽度和高度上设置＆amp; - 内部：70px（变换的缩放系数7的10px倍）。将它放在中间，而不是在悬停时将其缩放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%);
  }

变换比例使Div与border-radius模糊

1 个答案: