Question

我正在尝试创建一个滑动效果背景，并尝试使用框阴影来创建效果。它工作正常，但由于盒子阴影不能使用百分比单位，我必须手动设置像素单位的数量。

HTML：

<button id="play-game">Play Game!</button>

CSS：

#play-game{
    width:240px;
    height:71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}
#play-game:hover{
    box-shadow: inset 0 71px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

http://jsfiddle.net/muycgfwg/
我想知道是否有任何方法可以使盒子阴影成为元素的高度。我有另一种方法，但它有点难以合并，所以如果没有，那也没关系。谢谢你的帮助！

Answer 1

最好的方法是使用伪元素并将文字包装在<span>中。它的代码更多，但没有太复杂。这是一个例子：

http://jsfiddle.net/muycgfwg/2/

＆＃13;

#play-game{
  position: relative;
  font-size: 40px;
  background: rgb(61, 132, 212);
  border: none;
  padding: 10px 20px;
  overflow: hidden;
}

#play-game:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  transform: translateY(-100%);
  transition: all ease 0.5s;
}

#play-game:hover:after {
  transform: translateY(0);
}

#play-game span {
  position: relative;
  z-index: 10;
  transition: color 0.5s;
}

#play-game:hover span{
  color: rgb(222, 222, 222);
}

＆＃13;

<button id="play-game"><span>Play Game!</span></button>

＆＃13;

Answer 2

一个不使用JavaScript的简单解决方案是将box-shadow高度设置为等于或大于最高元素。

HTML：

<button class="bg-effect" id="play-game">Button test 1!</button>
<button class="bg-effect" id="play-game-2">Button test 2!</button>
<button class="bg-effect" id="play-game-3">Button test 2!</button>

CSS：

.bg-effect{
    width:260px;
    height: 71px;
    font-size:40px;
    transition: all ease 0.5s, color 0.5s;
    box-shadow: inset 0 0 0 0 rgb(3, 54, 110);
    background:rgb(61, 132, 212);
    border:none;
}

.bg-effect:hover{
    // '180px' represents the element with more height
    box-shadow: inset 0 180px 0 0 rgb(3, 54, 110);
    color:rgb(222, 222, 222);
}

// Setting different heights to the buttons
#play-game { height: 100px; }
#play-game-2 { height: 140px; }
#play-game-3 { height: 180px; }

高度未知的盒子阴影

2 个答案: