0

フラッシュでコーディングされたような効果を持つ CSS3 でいくつかのアニメーションを実装したいと考えています。映画がバックグラウンドで再生されている間、クレジットが画面のさまざまな位置に表示され続けるときに、映画のオープニング クレジットのような効果を探していました。ここで動画を使用する代わりに、画像を使用したいだけです。このようなものを探しています: Madmanimation

4

2 に答える 2

1

キーフレームと変換を使用した CSS3 アニメーションを調べる必要があります。 ここから始める

于 2012-09-14T18:09:40.160 に答える
1

私がやった本当に簡単な例。

HTML:

<h1>That's all!</h1>
<div class='bg'><h3>Pencil Nebula</h3></div>
<div class='bg'><h3>N44 in the Large Magellanic Cloud</h3></div>
<div class='bg'><h3>Messier 83: Central Region</h3></div>
<div class='bg'><h3>Dark Matter</h3></div>

CSS:

h1 {
    margin-top: 7em;
    color: transparent;
    text-align: center;
    animation: endani 1s 17s forwards;
}
.bg, h3 { position: absolute; }
.bg {
    top: 0; right: 0; bottom: 0; left: 0;
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0;
}
.bg:first-of-type {
    background-image: 
        url(http://i.space.com/images/i/21536/wW4/pencil-nebula-wide-1920.jpg);
    animation: bgani 5s;
}
.bg:nth-of-type(2) {
    background-image: 
        url(http://i.space.com/images/i/20755/wW4/N44-Large-Magellanic-Cloud.jpg);
    animation: bgani 5s 4s;
}
.bg:nth-of-type(3) {
    background-image: 
        url(http://i.space.com/images/i/20683/wW4/eso-messier-83.jpg);
    animation: bgani 5s 8s;
}
.bg:nth-of-type(4) {
    background-image: 
        url(http://i.space.com/images/i/15679/wW4/hubble-cluster-abell-520.jpg);
    animation: bgani 5s 12s;
}
h3 {
    padding: .2em .8em;
    background: rgba(0,0,0,.65);
    color: white;
}
.bg:first-of-type h3 { top: 25%; left: 15%; }
.bg:nth-of-type(2) h3 { bottom: 25%; right: 15%; }
.bg:nth-of-type(3) h3 { top: 25%; right: 15%; }
.bg:nth-of-type(4) h3 { bottom: 25%; left: 15%; }

@keyframes bgani { 
    0% { opacity: 0; } 20% { opacity: 1; }
    95% { opacity: 1; } 100% { opacity: 0 }
}

@keyframes endani { to { color: crimson; text-shadow: 0 0 2px white; } }

これは、不透明度がアニメーション化された 4 つの要素 (重ねて表示) を使用します (表示する要素をopacity0 から 1 に変更してフェードインし、非表示にする要素を から変更してフェードアウトしますopacity) 。 1 から 0) ですが、scale変換のアニメーション化 (消したい要素を 0 にスケーリングし、表示したい要素を 0 から 1 にスケーリングする) やtop/ right/ bottom/left値をアニメーション化して要素を移動するなど、他にも多数のオプションがあります。オンスクリーンとオフスクリーン。

また、複数の背景を持つ 1 つの要素のみを使用して、それらのbackground-sizeorをアニメーション化することもできますbackground-position(これは厳密には画像を切り替えるためです。変化するテキストを変化する画像と同期させる必要があります... または、より無秩序な効果のためにそれらを非同期のままにしておく必要があります)。 .

于 2012-09-15T07:38:47.493 に答える