如何为 CSS 过滤器蓝色和动画移除屏幕边缘的阴影答案

【问题标题】：How to remove shadow on edge of screen for CSS filter blue and animation如何为 CSS 过滤器蓝色和动画移除屏幕边缘的阴影
【发布时间】：2021-09-06 11:36:01
【问题描述】：

这只影响 Chrome！ Firefox 和 Safari 没有这个效果。

我有一个旋转的 div，它在屏幕的一半处应用了滤镜模糊。

随着正方形的旋转，每隔 90 度就会出现一个阴影，然后沿着屏幕底部的边缘消失。我一直在尝试消除这种阴影效果，但无法弄清楚是什么原因造成的。

这是一个sn-p的效果：

@keyframes rotations {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}

.body {
  background: #000000;
  overflow: hidden;
}

.orb {
  position: absolute;
  bottom: -100px;
  left: 100px;
  height: 200px;
  width: 200px;
  background: #00b9cf;
  filter: blur(50px);
  animation: rotations 4s linear infinite none;
}

<body class="body">
  <div class="orb" />
</body>

我注意到的事情：

它与动画和模糊效果有关。移除动画会导致阴影效果不出现。移除蓝色也会停止效果。效果每隔 90 度才会出现一次。

删除动画，您将无法获得效果。但是将动画设置为静止仍然会导致没有旋转的效果，例如：

@keyframes rotations {
  to {
    transform: rotate(0);
  }
}

这也意味着应用 45 度的旋转会移除效果，但我想要没有它的旋转动画。

我认为正在发生的事情是模糊混合了所有边的 div 的蓝色和背景的黑色。但是当它到达屏幕边缘时，它似乎是在减小 div 的大小并在 90 度时模糊边缘和背景，而不是像在 45 度时那样保持大小并将其移出屏幕。

【问题讨论】：

我会说这肯定与.orb 的负值bottom 有关，当您将其调整为0px 时，问题就停止了。如果您需要它像那样离开屏幕，并不能解决您的问题。

标签： css css-animations css-filters

【解决方案1】：

我无法解释为什么这行得通，但是-- 我将你的旋转球体分成两个元素：.orb 和.orb-wrapper。然后我将定位和动画应用于.orb-wrapper，并将模糊滤镜（以及height 和width 以使其正确填充包装器）应用于.orb 本身。这似乎已经在 Chrome 上为我解决了这个问题。见下文：

@keyframes rotations {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}

.body {
  background: #000000;
  overflow: hidden;
}

.orb-wrapper {
  position: absolute;
  bottom: -100px;
  left: 100px;
  height: 200px;
  width: 200px;
  animation: rotations 4s linear infinite none;
}

.orb {
  background: #00b9cf;
  height: 100%;
  width: 100%;
  filter: blur(50px);
}

<body class="body">
  <div class="orb-wrapper">
    <div class="orb" />
  </div>
</body>

【讨论】：