【问题标题】：How to apply a web-transition from inset to outer box-shadow on a div box?如何在 div 框上应用从插图到外框阴影的 web 过渡？
【发布时间】：2013-02-10 11:26:42
【问题描述】：

我正在尝试处理从插入框阴影开始到外框阴影结束的网络过渡。下面的 jsfiddle 显示了示例。问题是正常插入到无框阴影 web 转换工作但插入到外部不起作用。

http://jsfiddle.net/xq4qc/

HTML

<div class="greyrow"> 
    good transition
    </div>
<br/>
<br/>
<div class="whiterow"> 
    no transition
    </div>

CSS

.greyrow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.greyrow:hover{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: -webkit-box-shadow 1s;
    -moz-transition: -moz-box-shadow 1s;
    -o-transition: -o-box-shadow 1s;
    transition: box-shadow 1s;


}

.whiterow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.whiterow:hover{

-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
-webkit-transition: -webkit-box-shadow 2s;
    -moz-transition: -moz-box-shadow 2s;
    -o-transition: -o-box-shadow 2s;
    transition: box-shadow 2s;


}

【问题讨论】：

标签： html web css

【解决方案1】：

你可以通过过渡来做到这一点。

诀窍是转换必须在数值上，而不是在关键字上。

因此，您需要将正常状态指定为 2 个阴影、1 个内嵌和另一个外阴影，其中一个设置为 0（因此它是不可见的）：

.keyframe {
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 5s;
}

我已经为大小和时间设置了巨大的值，所以它更明显。那么悬停状态是：

.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}

注意阴影之间是有对应关系的，所以浏览器只需要转换一个数值（可以是所有的数据；但是'inset'关键字）。

fiddle

.keyframe {
    box-shadow: inset 0 0 10px #aaa;
    height:100px;
    width:250px;
    padding:10px;
    margin-bottom: 10px;
    left: 40px;
    top: 40px;
    position: absolute;
    border:1px solid #CCCCCC;
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 3s;
}
.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}

<div class="keyframe"> 
    dual shadow transition (hover me)
</div>

【讨论】：

优秀的答案！我一直在寻找这个。谢谢！

【解决方案2】：

实现它的另一种方法是在两个元素上转换盒子阴影。因此，将内部元素的阴影从 10px 过渡到 0，然后在外部元素上同时从 0 过渡到 10px。

.outer {
  display: inline-block;
  box-shadow: 0 0 0 #000;
}
.outer:hover {
  box-shadow: 0 0 30px #000;
}
.inner {
  width: 150px;
  height: 150px;
  background: #ee3b3b;
  box-shadow: inset 0 0 30px #000;
}
.inner:hover {
  box-shadow: inset 0 0 0 #000;
}

此处示例：http://codepen.io/Probocop/pen/yyrqNG

【讨论】：

【解决方案3】：

如果在插入和开始阴影之间切换之前先将动画设置为无，则可以非常接近关键帧。（您不能直接对此进行动画处理，因为它们是关键字而不是数值 - 即没有“almostInset”阴影）。

考虑以下 css：

.box {
    box-shadow: inset 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeOut 1s;
}
.box:hover {
    box-shadow: 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeIn 1s;
}

@/*add prefixes*/keyframes shadowFadeIn {
    0% { box-shadow: inset 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 10px #aaa; }
}

@/*add prefixes*/keyframes shadowFadeOut {
    0% { box-shadow: 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px #aaa; }
}

webkit 演示地址：http://jsfiddle.net/xq4qc/1/

我能想到的一个缺点是，这也会在第一页加载时为阴影设置动画。

【讨论】：