Question

我对Ajax-loader有一个想法。

这是我迄今为止所取得的成就：

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

我希望移动指示器（.dark-bar）融化＆＃34;与foreground-div。目前存在一条视觉上可区分的强硬路线。

有没有办法让移动指示器（.dark-bar）在左边缘，右边缘模糊？

Answer 1

尝试使用box-shadow属性并将垂直和水平轴值设置为0.像这样：

div {
  box-shadow: 0 0 10px black;
}

这可能与您想要的效果类似。

Answer 2

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

filter - filter属性提供模糊等图形效果，锐化或变色元素。过滤器通常用于调整图像，背景和边框的渲染。

请为vendor prefixes等其他浏览器添加-webkit-,-o-,-moz-,-ms-以进行过滤。

＆＃13;

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%;
  }
}

＆＃13;

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

＆＃13;

CSS：如何完成边缘模糊的div？

2 个答案: