html - CSS:如何实现边缘模糊的div？

Question

我有一个 Ajax 加载程序的想法。

这是我到目前为止所取得的成就:

body {
  background-color: lightGrey;
  counter-reset: h1-counter;
}
.wrap {
  max-width: 200px;
  height: 50px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}
.wrap div {
  background: linear-gradient(#0032f0, white, #0032f0);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: .8;
}
.wrap div.dark-bar {
  position: absolute;
  width: 10%;
  height: 100%;
  animation: moveDarkBar 3s linear infinite;
  z-index: 1;
}
@keyframes moveDarkBar {
  from {
    left: -20%;
  }
  to {
    left: 120%;
  }
}

<div class="wrap">
  <div></div>
  <div class="dark-bar"></div>
</div>

我希望移动指示器 (.dark-bar) 与 foreground-div“融合”。目前有一条视觉上可区分的硬线。

有没有办法让移动指示器 (.dark-bar) 在左右边缘变得模糊？

Answer 1

你可以使用 CSS filter 添加 blur to top layer 动画如下，

filter - The filter property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

请为其他浏览器添加 供应商前缀，例如 -webkit-,-o-,-moz-,-ms- 以进行过滤。

body {
  background-color: lightGrey;
  counter-reset: h1-counter;
}
.wrap {
  max-width: 200px;
  height: 50px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}
.wrap div {
  background: linear-gradient(#0032f0, white, #0032f0);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: .8;
}
.wrap div.dark-bar {
  position: absolute;
  width: 10%;
  height: 100%;
  animation: moveDarkBar 3s linear infinite;
  z-index: 1;
  -webkit-filter:blur(2px); /*Add this*/
}
@keyframes moveDarkBar {
  from {
    left: -20%;
  }
  to {
    left: 120%;
  }
}

<div class="wrap">
  <div></div>
  <div class="dark-bar"></div>
</div>