首页 文章

CSS：奇怪的盒子阴影过渡

提问于
浏览 次
0

我有一个与它旁边的元素颜色相同的盒子阴影，我正在使用CSS过渡来淡化它们 . 盒阴影和背景颜色的css过渡是相同的，所以我不明白为什么它们看起来以不同的速率淡入 .

Here a jsfiddle to reproduce the issue，这是相关的SCSS：

.right-of-blue {
  box-shadow: 8px 0 transparent;
}

.outline, .background {
  border-color: transparent;
  background-color: transparent;
}

// Clicking the button toggles this class on the wrapper div
.colors-enabled {
  .should-animate {
    transition:
    background-color .5s,
    box-shadow .5s,
    border-color .5s;
  }

  .outline {
    border-width: 1px 2px;
    margin: 0 -2px;
    background: none !important;
    border-style: solid;
  }

  .background {
    border-width: 1px;
    margin: 0 -1px;
    border-style: solid;
  }

  .red {
    border-color: $red;
    background-color: $red;
  }

  .blue {
    border-color: $blue;
    background-color: $blue;
  }

  .right-of-blue {
    box-shadow: 8px 0 $blue;

    // Bump the outline/background of the next segment over to make room for the box shadow
    & + span.outline {
      margin-left: 0;

      // Bump the text inside back to keep it from moving
      & > span > span {
        margin-left: -2px;
      }
    }
  }
}
css css-transitions box-shadow

1 回答

  • 1

    在我看来，这不是因为不同的费率 . 你是这样想的，因为当蓝色背景的不透明度为例如0.25时，阴影也为0.25 . 所以两个0.25的不透明度的重叠使你感觉它是0.5;

    我改变你的小提琴避免重叠，我删除了重叠的边框颜色 . 你可以看到不像以前那样的速度 .

    .right-of-blue {
  box-shadow: 0 8px transparent;
}

    点击这里：

    https://jsfiddle.net/ahmadm/kxyua0dj/

    回复于

相关问题