javascript - 使用 CSS 制作 mask 盒动画？

Question

如何在 CSS 中实现从下到上的纯色图像删除？我认为我没有使用正确的关键字，但我需要这样做 https://codepen.io/viljamis/pen/KdBoYZ没有梯度。这肯定有一个答案，我只是找不到正确的语法。

slide-1 {
  -webkit-transition: -webkit-mask-position 2s ease;
  mask-image: linear-gradient(
    to right, 
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,1) 100%
  );

我怎样才能将其修改为实心且从下到上？

Answer 1

试试这个作为替代方案(您可以使用悬停鼠标检查下面的代码段)

代码如下

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

<div id="cf">
  <img height="200px" width="200px" class="bottom" src="https://cnet4.cbsistatic.com/img/NlyoQRNtMD1kFL4pKE1LzkM6uhI=/940x0/2018/03/16/5b1ba726-2c4d-4163-b14d-ed97ff23f959/20180316-windows-10-background-01.jpg" />
  <img class="top" src="https://img.etimg.com/thumb/msid-70532741,width-643,imgsize-39687,resizemode-4/windows7.jpg" height="200px" width="200px" />
</div>