Question

我正在试验盒子阴影，并认为可以制作一个窗口效果（如下例所示），这样你就可以隐藏文字或下面只能看到的图像 - 或者＆＃34;打开＆＃34; - 当你悬停/点击时。

不幸的是，它并不像那样工作，因为阴影总是低于文字或图像，在我完成之前我没有意识到。

是否有解决此问题的方法，或者我应该使用其他方法在没有框阴影的情况下获得相同的结果？

＆＃13;

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

＆＃13;

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

＆＃13;

*注意：我还没能弄清楚过渡为何会闪烁：/

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>

使用框阴影打开/关闭窗口效果

1 个答案: