Question

我正在尝试使用图像对加载图标进行动画处理。我想要实现的是使图像从左到右无限地在两种颜色之间进行动画处理。这是在Angular 7中完成的。我是动画的新手，但据我所知，我可以使用CSS动画解决此问题。

我想要的东西类似于下面的示例。只有我希望灰度消失在右边，而不是灰度，我要选择两种不同的颜色。

感谢所有帮助！

body {
  margin: 0;
}

.effect {
  position: relative;
}

.effect-dup {
  filter: grayscale(100%);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0;
  animation: width 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
  <div class='effect-dup'><img src="https://placeimg.com/640/480/nature" /></div>
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
  <div class='effect-dup'>
    <img src="https://placeimg.com/640/480/tech" />
  </div>
</div>

Answer 1

您可以考虑增加一层和mix-blend-mode。只需调整颜色和混合以获得所需的颜色。您将不再需要复制图像。

body {
  margin: 0;
}

img {
  width: 200px;
  display: block;
}

.effect {
  position: relative;
  display: inline-block;
  overflow:hidden;
}

.effect:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: width 2s ease-in-out infinite;
  mix-blend-mode: color;
  background: linear-gradient(blue,red);
}

@keyframes width {
  from {
    transform:translateX(-100%);
  }
  to {
    transform:translateX(100%);
  }
}

<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
</div>

有没有一种方法可以使图像的颜色从左到右？

1 个答案: