如何让我的 div 的框阴影在悬停时淡入（而不是在悬停时淡出）？

Posted 2023-03-06

【中文标题】如何让我的 div 的框阴影在悬停时淡入（而不是在悬停时淡出）？

【英文标题】：How would I make the box-shadow of my div fade in on hover (and out when not hovering over it)?

【发布时间】：2020-11-10 16:36:04

【问题描述】：

我只是在玩动画。我有一个带有三个盒子阴影的 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>

【参考方案1】：

当您为多个box-shadow 设置动画时，请确保阴影的数量匹配。所以浏览器会知道哪个box-shadow是哪个。

例如，我刚刚从:hover复制了box-shadow，并在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>