CSS3 过渡缓入和缓出框阴影

Posted 2023-03-06

【中文标题】CSS3 过渡缓入和缓出框阴影

【英文标题】：CSS3 Transition Ease in and out Box Shadow

【发布时间】：2013-04-16 08:20:10

【问题描述】：

我正在尝试使用 CSS3 让 div id 轻松进出盒子阴影。

我目前的 CSS 是：

#how-to-content-wrap-first:hover 
    -moz-box-shadow: 0px 0px 5px #1e1e1e; 
    -webkit-box-shadow: 0px 0px 5px #1e1e1e; 
    box-shadow: 0px 0px 5px #1e1e1e;
    -webkit-transition: box-shadow 0.3s ease-in-out 0s;
    -moz-transition: box-shadow 0.3s ease-in-out 0s;
    -o-transition: box-shadow 0.3s ease-in-out 0s;
    -ms-transition: box-shadow 0.3s ease-in-out 0s;
    transition: box-shadow 0.3s ease-in-out 0s;

我遇到的问题是，在元素的第一次悬停时没有缓入或缓出，然后任何后续悬停缓入但不缓出。

人们有什么建议将不胜感激？

【参考方案1】：

您需要在 .class 而不是 .class:hover 上使用转换

div 
  height: 200px;
  width: 200px;
  box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;


div:hover 
  box-shadow: 0 0 3px #515151;
  ;

<div></div>

【讨论】：

在 div 中需要为我 box-shadow: none。

有一种更好（= 性能优化）的方式来为 box-shadow 设置动画。见tobiasahlin.com/blog/how-to-animate-box-shadow

【参考方案2】：

这是resource-efficient solution

#how-to-content-wrap-first::after
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         


#how-to-content-wrap-first:hover::after 
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;

【参考方案3】：

这可以工作：

 #how-to-content-wrap-first:hover
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;