jquery - 使用CSS3的Flash动画效果

Question

我想在 CSS3 中实现一些动画效果，就像它在 flash 中编码一样。我一直在寻找一些看起来像电影片头字幕的效果，当电影在后台播放时字幕不断显示在屏幕的不同位置。唯一的事情不是在这里使用电影我想使用图像。寻找这样的东西:Madmanimation

Answer 1

A really simple example我刚做了。

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; } }

这一个使用四个元素(一个显示在另一个之上)，它们的不透明度动画(通过将其 opacity 从 0 更改为 1 来淡入要显示的元素，然后淡入淡出通过将其 opacity 从 1 更改为 0 来隐藏您想要隐藏的那个)，但是还有许多其他选项，例如动画 scale 转换(您将元素缩放为 0你想消失，从 0 到 1 你想出现的元素)或动画 top/right/bottom/left 值将元素移动到屏幕上和屏幕外。

此外，您可以只有一个具有多个背景的元素，然后为它们的 background-size 或 background-position 设置动画(这完全是为了切换图像，你会必须将不断变化的文本与不断变化的图像同步......或者让它们不同步以获得更困惑的效果)。