2017-11-15 3 views
2

무엇을 달성하려고하는 것은 이것이다 :CSS가 점차 이동하는 div의 배경 변경?

enter image description here

동전 (링) 슬롯에 침몰. 처음에는 파란색이었습니다. 빨간색 배경에 들어가면 흰색이됩니다. 슬롯에 도달하면 서서히 사라집니다.

이것은 내가 지금까지 함께 온 것입니다 : 아마, 더 나은 솔루션이 있다면 제가 궁금 그래서 비록

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

이 더 해킹처럼 보인다? 움직이는 배경과 추가 레이어없이.

+0

제가보기에 아무런 문제가 없습니까? .. "더 나은 해결책"은 상대적인 것이지, 더 나은 것을 의미합니까? –

+0

백그라운드를 움직이는 솔루션이 작동하지만 예제로 사용됩니다. 이것을 최종 프로젝트에 적용하는 것은 다소 불편할 것입니다. 덜 말할만큼 유연하지 않습니다. 어쩌면 그라디언트로 작업 할 가능성이 있습니다 ... 그냥 겉보기에 쉬운 문제 일뿐입니다 (( – Rossitten

답변

2

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>

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

+0

woah, mate! 고마워요 !!!!!!!!!!) 그게 내가 찾고 있던 것입니다. , 정말로. – Rossitten

+1

@ Rossitten 당신은 환영합니다;) 나는 당신이 호버를위한 더 좋은 방법을 찾을 수있게했습니다 :) 당신은 모든 것을 컨테이너 안에 넣었습니다. –