Question

我只是在玩动画。我有一个具有三个框阴影的div，我想在div悬停时淡入，一个接一个，从最靠近div的那个开始。我还希望当有人停止在div上悬停时发生这种情况。知道如何实现吗？

#div2 {
  background-color: aquamarine;
  box-shadow: 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  background-color: aquamarine;
  box-shadow: 5px 5px 1px darkblue, 10px 10px 3px blue, 15px 15px 5px lightblue, 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
}

<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Answer 1

为多个box-shadow设置动画时，请确保阴影数量匹配。这样浏览器就会知道哪个box-shadow是哪个。

例如，我刚刚从box-shadow复制了:hover，并使其中一些透明了0px：

#div2 {
  background-color: aquamarine;
  box-shadow: 
    0px 0px 1px transparent, 
    0px 0px 3px transparent, 
    0px 0px 5px transparent, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
    
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  box-shadow: 
    5px 5px 1px darkblue, 
    10px 10px 3px blue, 
    15px 15px 5px lightblue, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
}

<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

如何在悬停时使div的框阴影淡入（当不悬停在其上方时淡出）？

1 个答案: