html - 如何在线性过渡时保持 div 前半部分的不透明度？

Question

我想在 div 上保留部分不透明度，我的意思是随着过渡的进行，div 的第一部分具有初始不透明度，而 div 的末尾具有最终颜色。

这是我目前所拥有的:

div {
  width: 100px;
  height: 100px;
  background: #ffd42b;
  -webkit-transition: width 2s; /* Safari */
  opacity: 0.1;
  transition: all 15s linear 0.2s;
  transition-timing-function: ease;
}

div:hover {
  width: 300px;
  opacity: 1;
}

<div></div>

Answer 1

可以考虑mask去做这个。这个想法是定义两个蒙版:一个将保持固定并定义不应更改的初始不透明度，另一个将从下到上设置动画以模拟右侧部分的不透明度过渡。

.box {
  width: 100px;
  height: 100px;
  background: url(https://picsum.photos/id/103/300/100);
  -webkit-mask:
    linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)) 0 0       /100px 100% no-repeat,
    linear-gradient(rgba(0,0,0,1)  ,rgba(0,0,0,0)  ) 100px 100%/100%  600% no-repeat;
   mask:
    linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)) 0 0       /100px 100% no-repeat,
    linear-gradient(rgba(0,0,0,1)  ,rgba(0,0,0,0)  ) 100px 100%/100%  600% no-repeat;
  transition: all 1s linear;
}

.box:hover {
  width: 300px;
  -webkit-mask-position:0 0,100px 0%;
  mask-position:0 0,100px 0%;
}

body {
 background:pink;
}

<div class="box">

</div>