2012-09-14 74 views
0

我想在CSS3中实现一些动画,其效果类似于Flash中的编码。 我一直在寻找一些看起来像电影开放积分的效果,当电影在后台播放时,积分不断显示在屏幕的各个位置。唯一的事情,而不是在这里使用电影,我想使用图像。 寻找类似这样的:Madmanimation使用CSS3的Flash动画效果

+0

按照上面给出的网站的代码尝试,想要学习如何以我自己的风格在图像中对事物进行动画处理。 –

+0

也许我应该更清楚一点:向我们展示你的尝试。 – Shmiddty

+0

这里你去:http://www.w3.org/TR/css3-animations/ –

回答

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-sizebackground-position(严格来说,切换图像,你必须同步变化的图像与变化的图像...或保持不同步为更加混乱的效果)。

1

您需要使用关键帧和转换来查看CSS3动画。 Start here

+0

我正在寻找一些教程来帮助我使用CSS3动画图像,使他们看起来像一部电影。当图像正在转换时也显示一些文本。 –

+0

关键帧动画可以做到这一切。 – Ana