时间戳

首页 > 解决方案 > 是否可以从插入框阴影过渡到常规框阴影？

css - 是否可以从插入框阴影过渡到常规框阴影？

问题描述

脱离上下文这可能没有意义，但我正在做一些我希望有一个插入框阴影转换为正常框阴影的东西。过渡在没有插图的情况下有效，但会中断。可能与否？

.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

标签： csssasstransition

解决方案

box-shadow inset 到常规的直接转换是不可能的。但是，有一种技巧可以产生更接近的效果。

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

推荐阅读