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- 색인으로 재생할 수 있습니다. 하나는 rect의 일부이지만 overflow:hidden으로 숨겨져 있으며 여백을 늘리면 마우 스에서만 표시됩니다. 두 번째 것 (주된 것)은 낮은 Z- 인덱스 때문에 rect 아래에 마우스를 올리면 숨겨집니다.

이 트릭을 사용하면 시각적으로에 두 개의 테두리 색상이있는 원이 하나 있으므로 배경을 변경할 필요가 없습니다. 당신은 모두가 그들의 이동 한 원을 타겟팅 할 수 없습니다로

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

이 솔루션에 대한 유일한 문제는 당신이 컨테이너에 호버 효과를 확인해야한다는 것입니다 (여기 내가 몸을 사용).