0

我想在 CSS3 中实现一些动画，其效果类似于在 Flash 中编码的效果。我一直在寻找一些看起来像电影片头字幕的效果，当电影在后台播放时，字幕不断显示在屏幕的各个位置。唯一的事情不是在这里使用电影，而是我想使用图像。寻找这样的东西：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; } }

这个使用了四个元素（一个在另一个之上显示），它们的不透明度动画（您通过将其从 0 更改为 1 来淡入要显示的元素，并通过将其从更改opacity来淡出要隐藏的元素opacity1 到 0），但还有许多其他选项，例如动画scale变换（将要消失的元素缩放到 0，要出现的元素从 0 缩放到 1）或动画///值以top移动元素屏幕上和屏幕外。rightbottomleft

此外，您可以只拥有一个具有多个背景的元素，然后对其进行动画background-size处理background-position（这严格用于切换图像，您必须将不断变化的文本与不断变化的图像同步......或者让它们不同步以获得更混乱的效果） .

于 2012-09-15T07:38:47.493 回答