javascript - 在css3中创建从下到上的灰度效果

Question

我需要用 CSS 制作一张从灰度到 rgba 的图片。我知道我可以用 CSS3 改变它，但我需要一个流畅的动画。我需要用动画从下到上填充颜色。我附上一张图片以使其清楚。

请检查这个fiddle ，这就是我到目前为止所做的。

HTML:

<img src="http://static.wallpedes.com/wallpaper/resolution/resolution-of-wallpaper-pictures-with-green-eyes-hd-best-girls-full-hd-wallpapers-wallpaper-site-for-mobile-android-download-facebook-2012-app-in-the-world.jpg"/>

CSS:

img {
  -webkit-animation: mymove 5s;
  -moz-animation: mymove 5s;
  -ms-animation: mymove 5s;
  animation: mymove 5s;
  width: 400px;
}
@-webkit-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-moz-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
@-ms-keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}
/* Standard syntax */

@keyframes mymove {
  0% {
    -webkit-filter: grayscale(100%);
    -mos-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    -mos-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

提前致谢。

Answer 1

试试这个 css 解决方案:

img.gray { 
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
}
.box {
  width: 350px;
  height: 200px;
  position: relative;
}
img {
  width: 350px;
  height: 200px;
  position: absolute;
  bottom: 0;
}
.box-color {
  overflow: hidden;
  width: 350px;
  position: absolute;
  height: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: height 2s; 
  transition: height 2s;
  z-index: 1;
}
.box:hover .box-color {
  height: 100%;
}

<div class="box">
  <div class="box-color">
    <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="color" />
    </div>
  <img src="http://lorempicsum.com/futurama/350/200/1" alt="" class="gray" />
</div>