使用內嵌css動畫創建html橫幅廣告

Question

是否可以使用內嵌css動畫創建html橫幅廣告？我只需要一個帶我的代碼的div，它們將插入到他們的頁面中，因此動畫和樣式需要內聯。我只需要將一個按鈕的圖像動畫到div中，以便它看起來像在滑動。我使用相對定位來佈局元素到目前爲止。這可能嗎？這是我最終需要的佈局代碼。我需要div「按鈕」從底部開始動畫，然後落在底部：30px就像現在一樣。

<div style="width:160px; height:600px; text-align:center; position: relative;"> 
<a href="" target=_blank"><img src="images/Agent-Ad_Crush-160x600_b_110716.jpg" alt="Broadview Networks Generate New Leads And Crush The End Of The Year!" width="160" height="600" border="0" /></a> 
<div class="words" alt="" width="160" height="180"style="position: absolute; bottom: 150px; left: 11px;"> 
<img src="images/Agent-Ad_Crush-160x600_b_110716-words.jpg"> 
</div> 
<div class="button" alt="" width="116" height="32"style="position: absolute; bottom: 30px; left: 22px;"> 
<img src="images/Agent-Ad_Crush-160x600_b_110716-button.jpg">  
</div> 
</div> 

Answer 1

如果您使用只是 HTML和內聯CSS，那麼答案是否定的。具體而言，@keyframes不能在內聯樣式中定義。他們可以被定義在<style>標籤中（正如@Ryan Gee指出的那樣）但是<style><style>標籤必須在頭上，這就是標籤廣告的標準。

現在，要在一個點上的事情複雜化，HTML5引入了scoped attribute是會讓你用在身上<style>標籤，但支持具有since been dropped from most of the browsers.

如果一個巧妙的解決辦法的人都知道我會非常感興趣和印象深刻！

Answer 2

您可以使用<style>標記，但這不可取。有關說明，請參閱here。

Answer 3

如果你不依賴於用戶在動畫開始之前點擊，一種選擇是使用動畫.gif。

這樣你就不會有所有HTML的開銷。

另一種選擇是，根據他們在主機上的訪問權限，爲他們提供一個帶動畫的完全合格的網頁，以便他們可以上傳到他們的主機。 （或者，您可以託管該頁面）

然後，您與頁面一起提供的div將包含一個鏈接到網頁的iframe，它呈現動畫。這個選項在用戶尺寸方面可能不太敏感。