文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在div框上应用从内嵌到外部框影的web转换？

问如何在div框上应用从内嵌到外部框影的web转换？
EN

Stack Overflow用户

提问于 2013-02-25 10:34:24

回答 3查看 11.2K关注 0票数 8

我试着做一个网络过渡，从内嵌框阴影开始到结束在外部框影。下面的jsfiddle显示了example.The问题是正常的，不设为零，框影网络转换工作，但嵌入到外部不工作。

http://jsfiddle.net/xq4qc/

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


}

web

css

html

Stack Overflow用户

发布于 2013-05-13 21:51:30

你可以通过过渡来完成它。

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

因此，您需要将正常状态指定为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>

票数 21

查看全部 3 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15064940

复制

相似问题

问如何在div框上应用从内嵌到外部框影的web转换？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div框上应用从内嵌到外部框影的web转换？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div框上应用从内嵌到外部框影的web转换？
EN