如何解决是否可以从嵌入的盒子阴影过渡到常规的盒子阴影?
这可能与上下文无关,但是我正在做一些我希望有插入式盒形阴影过渡到普通盒形阴影的事情。过渡无需插入即可工作,但会中断。可能吗?
.foo{
height: 20rem;
width: 20rem;
box-shadow: inset 4px 0px 4px grey,inset -4px 0px 4px grey;
background: cornsilk;
&:hover{
box-shadow: 1px 9px 4px 9px grey;
transition: box-shadow 1s;
}
}
https://codepen.io/bobam/pen/ZEWBeJp
解决方法
无法将框阴影插图直接转换为常规。但是,有一种方法可以起到更密切的作用。
考虑以下CSS:
.foo {
width: 50px;
height: 50px;
border: 1px solid #aaa;
box-shadow: inset 0 0 10px #aaa;
animation: boxShadowOut 1s;
}
.foo:hover {
box-shadow: 0 0 10px #aaa;
animation: boxShadowIn 1s;
}
@keyframes boxShadowIn {
0% { box-shadow: inset 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: 0 0 10px #aaa; }
}
@keyframes boxShadowOut {
0% { box-shadow: 0 0 10px #aaa; }
50% { box-shadow: none; }
100% { box-shadow: inset 0 0 10px #aaa; }
}
<div class="foo"></div>
,
您可以进行过渡。您只需要一次定义所有阴影,并在不需要阴影时使用它们的值使它们0
:
.foo {
height: 8rem;
width: 8rem;
margin:10px;
box-shadow:
inset 4px 0px 4px grey,inset -4px 0px 4px grey,0px 0px 0px 0px grey;
transition: box-shadow 1s;
background: cornsilk;
}
.foo:hover {
box-shadow:
inset 0px 0px 0px grey,inset 0px 0px 0px grey,1px 9px 4px 9px grey;
}
<div class="foo">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。