如何在div框中应用从插入到外框阴影的Web转换？

Question

我正在尝试进行一个Web转换,它以插入框阴影开始,结束于外框阴影.下面的jsfiddle显示了这个例子.问题是正常插入无框阴影网络转换工作但插入外部不起作用.

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;


}

Answer 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'关键字).

小提琴

.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>

Answer 2

如果您在插入和开始阴影之间切换之前首先设置为无动画,则可以非常接近关键帧.(您无法直接为此设置动画,因为它们是关键字而非数字值 - 即没有"近似插入"阴影).

考虑以下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/

我能想到的一个缺点是,它还会在第一页加载时为阴影设置动画.