2017-11-15 25 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-インデックスで再生できます。 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円をターゲットにすることはできませんと(ここで私は体を使用)容器上にホバー効果をしなければならないということです。

+0

woah、mate!ありがとうございます!!!!!!!!!!) これは私が探していたものです本当に。 – Rossitten

+1

@ロッシーテンあなたは歓迎です;)私はホバーのためのより良い方法を見つけることができます:)あなたはすべてをコンテナの中に入れます。 –

関連する問題