Open/close window 带框阴影的效果

Question

我正在尝试使用框阴影，并认为可以制作 window 效果（如下例所示），这样您就可以隐藏下面只能看到的文本或图像- 或 "opened" - 当您 hover/click.

不幸的是，它不是那样工作的，因为阴影总是在文本或图像下方，直到完成后我才意识到这一点。

是否有解决此问题的方法，或者我是否应该使用另一种方法来获得没有框阴影的相同结果？

body {
 background: #20262E;
}

.window {
 display: inline-block;
 height: 200px;
 width: 300px;
 margin: 20px;
 background: #F8F8F8;
 text-align: center;
 line-height: 200px;
}

.window {
 box-shadow: inset 0 200px #0084FF;
 transition: box-shadow 1s ease-in-out;
}

.window:hover {
 box-shadow: inset 0 0 #0084FF;
}

<div class="window">
  box 1
</div>

*注意：我一直无法弄清楚为什么过渡会闪烁：/

Answer 1

同意这可能是 box-shadow 的错误。如果您正在寻找另一种 CSS 方法来处理这个问题，那么 :before 或 :after 伪元素?

body {
  background: #20262E;
}

.window {
  display: inline-block;
  height: 200px;
  width: 300px;
  margin: 20px;
  background: #F8F8F8;
  text-align: center;
  line-height: 200px;
  position: relative;
}

.window:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #0084FF;
  transition: bottom 1s ease-in-out;
}

.window:hover:after {
  bottom: 100%;
}

<div class="window">box 1</div>

Open/close window 带框阴影的效果

Open/close window effect with box-shadows

html

css

transition

box-shadow