CSS逐渐变化的移动div？

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/

这看起来更像是黑客，所以我想知道是否有更好的解决方案，可能呢？没有移动背景和额外的图层。

Answer 1

您可以使用2个圆圈并使用z-index进行游戏。一个将是rect的一部分，但隐藏overflow:hidden并且只有在您增加其边距时才会在悬停时可见。第二个（主要的）将被悬停在rect下面，因为它的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>

此解决方案的唯一问题是您必须在容器上进行悬停效果（此处我使用了正文），因为您无法定位一个圆圈来移动它们。