web-dev-qa-db-ja.com

背景をフェードアウト/インにする

CSS3を使用して<div>の真っ白な背景をフェードインおよびフェードアウトする方法はありますか？コンテンツだけが見えるようにして、背景だけが消えるようにします。

CSS3トランジション/トランスフォームを使用するアイデアはありますか？

ご協力ありがとうございました。

csscss-transitionstranslate
14
cmplieger

確かに、background-colorで transition property を直接使用できます。

div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

これが 例 が:hoverで赤くなる背景です。

22
Pat

これは、画像や背景の色あせの例に役立ちます。- http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

ただし、CSS 3を使用して移行を行うと、効果がサポートされていないブラウザーに限定されます。

2
KryptoniteDove

1つのコンテナーdivに2つのdivsを含めることができます。最初のdivは白い背景を含み、2番目のdivはコンテンツを取得します。

次に、CSS3変換を使用して、最初のdivの不透明度をゼロにアニメーション化します。

0
Husky