从图像中滑出颜色

Question

很难解释。基本上我连续4个心脏，它们看起来像这样（空的和满的）

所以我有这排心，都满了。我想基本上将颜色滑出来。所以它的红色，然后灰色的颜色从右边缓缓滑动，直到完整的心脏是灰色的。 我有这个想法，我掩盖了灰色图像，并将一个红色方块放入并向左滑动，但我不知道该怎么做。
谷歌没有帮助我，只能找到淡化和图像循环器效果。

提前致谢

Answer 1

您可以将两个div包含img放在一起，并增加宽度以创建幻灯片效果。（将鼠标悬停在心脏上以查看它）

.container {
    width:30px;
    height:30px;
    position:relative;
}
.container div {
    position:absolute;
    height:100%;
    transition:.5s all;
    overflow:hidden;
}
.container img{
    width:20px;
}
.one {
    width:100%;
}
.two {
    width:0;
    height:100%;
}
.container:hover .two{
    width:100%;
}

<div class="container">
    <div class="one">
        <img src="http://i.stack.imgur.com/5uToI.png">
    </div>
    <div class="two">
        <img src="http://i.stack.imgur.com/j7ovV.png">
    </div>
</div>

Answer 2

您可以在CSS中创建此类：

.desaturate { 
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

并在你喜欢的每个元素上使用它。这是最好的＆amp;我知道的最简单的解决方案。希望能帮助到你。

修改要为其设置动画，请在默认样式中将过滤器设置为none，然后设置transition: all 0.3s。这样，当您将类添加到元素/图像时，它将慢慢改变。

Answer 3

你可以结合使用css mask和css animation translate：

• https://developer.mozilla.org/en-US/docs/Web/CSS/mask

徘徊在心上：

＆＃13;

＆＃13;

.wrap,
.grey-bg,
.red-bg {
  height: 100px;
  position: relative;
  width: 100px;
}
.wrap {
  mask: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png);
  -webkit-mask: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png);
  overflow: hidden;
}
.grey-bg {
  background: grey;
}
.red-bg {
  background: red;
  left: -100px;
  position: absolute;
  top: 0;
}

.wrap:hover .red-bg {
  animation: move 3s ease;
  animation-fill-mode: forwards;
  
}
@keyframes move {
  100% {
    transform: translate(100px, 0);
  }
}

＆＃13;

<div class="wrap">
  <div class="grey-bg"></div>
  <div class="red-bg"></div>
</div>

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>

＆＃13;

＆＃13;

＆＃13;