使用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（嚴格來說，切換圖像，你必須同步變化的圖像與變化的圖像...或保持不同步爲更加混亂的效果）。

Answer 2

您需要使用關鍵幀和轉換來查看CSS3動畫。 Start here