移动div的CSS渐变背景？

Question

我想要实现的是:

一枚硬币(戒指)沉入槽中。最初它是蓝色的。当它进入红色背景时，它变成白色。当它到达插槽时 - 它会逐渐消失。

这是我到目前为止的想法:

  .circle {
  transition: all 1s ease;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: url(http://a5w.org/up/uploads/mike/2017-11-15/1510773962_red_square.png) no-repeat;
  background-color: #fff;
  background-position: 0 0;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 22;
}

.circle:hover {
  margin-top: 100px;
  background-position: 0px -100px;
}

.rect {
  margin-top: 200px;
  width: 100%;
  height: 400px;
  background: #666;
  transition: all 0.5s ease;
}

.slot{

  position: absolute;
  z-index: 666;
  background: #666;
  margin-top: 50px;

  height: 200px;
  width: 230px;
  border-top: solid 2px #333


}

https://jsfiddle.net/y4fpyjsa/17/

虽然这看起来更像是一个 hack，所以我想知道是否有更好的解决方案？无需移动背景和额外图层。

Answer 1

您可以使用 2 个圆圈并使用 z-index。一个将成为矩形的一部分，但使用 overflow:hidden 隐藏，并且只有在您增加其边距时才会在悬停时可见。第二个(主要的)将在悬停时隐藏在矩形下方，因为它的 z-index 较低。

通过这个技巧，您将在视觉上拥有一个具有 2 种不同边框颜色的圆圈，并且无需更改背景。

.circle {
  transition: all 1s ease;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: transparent;
  border:40px solid red;
  background-position: 0 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left:-100px;
  z-index: 22;
}
.white {
  top:-200px;
  border:40px solid white;
  z-index:21
}


body:hover .circle {
  margin-top: 100px;
}

.rect {
  margin-top: 200px;
  width: 100%;
  height: 400px;
  background: #666;
  transition: all 0.5s ease;
  position:relative;
  z-index:500;
  overflow:hidden;
}

.slot {
  position: absolute;
  z-index: 666;
  background: #666;
  margin-top: 50px;
  height: 200px;
  width: 230px;
  border-top: solid 2px #333;
  right:50%;
  margin-right:-115px;
}

<div class="circle">
</div>
<div class="slot">
</div>
<div class="rect">
<div class="circle white">
</div>
</div>

此解决方案的唯一问题是您必须在容器(此处我使用主体)上产生悬停效果，因为您无法瞄准一个圆圈来移动它们。