0

だから私はその中にタグが入った<header>タグを持っ<h1>ています。タグにはCSSの<header>背景画像があり、CSSまたはjQueryのいずれかを使用してゆっくりとフェードインします。

<header>
    <h1>Title</h1>
</header>

これは、タグ全体をフェードインせずに可能ですか<header>（タグもフェードインし<h1>ますか？HTMLを変更したくありません。

4

3 に答える 3

1

子要素は、親の不透明度を継承します。

背景が色の場合は、background-color代わりにプロパティをアニメーション化できます。

色でない場合は、子をアニメーション要素の外側に移動できますが、CSSを使用して配置し、子（またはデザインに一致するもの）のように見せます。

于 2012-05-29T04:10:38.607 に答える
0

<h1>これは、子ノードであるため、そのままでは不可能です。

HTMLを変更したくない場合は、jqueryを使用してから移動し<h1>、<header>ヘッダーを個別にアニメーション化できます。

たとえば、次のようなものを使用します。

$('header:first')
    .find('h1')
        .insertBefore('header:first')
        .end()
    .fadeIn();

子ノードでない場合でも、<h1>が上に配置されるようにCSSルールを適用する必要があります。<header>

于 2012-05-29T04:12:45.980 に答える
0

transition次を使用して、背景色から画像に変更できると確信しています。

transition: background 5s linear

したがって、たとえば：

#div {
    -webkit-animation:ani 5s;       
    background: url('http://tinyurl.com/cxnemfx');
}

@-webkit-keyframes ani {
from {background: black;}
to {background: url('http://tinyurl.com/cxnemfx');}
}​

Chrome / Safariのデモ：http：//jsfiddle.net/f32RS/1/

ただし、完全な効果を得るには、別の画像から最終的な画像に移行することをお勧めします。例はまさにそれであり、可能なことの例です。;）

于 2012-05-29T04:24:39.540 に答える