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-インデックスで再生できます。 1つはrectの一部になりますが、overflow:hiddenで非表示になり、マージンを大きくすると、ホバー上にのみ表示されます。 2番目のもの（主なもの）は、Z値が低いので、rectの下にマウスを置いて隠れてしまいます。

このトリックを使用すると、視覚的にに2つの異なる境界線の色が付いた1つの円があり、背景を変更する必要はありません。

.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>

この解決策の唯一の問題は、あなたがそれらの両方を移動するために1円をターゲットにすることはできませんと（ここで私は体を使用）容器上にホバー効果をしなければならないということです。