创建带有内联 css 动画的 html 横幅广告

Question

是否可以制作带有内联 css 动画的 html 横幅广告？我只需要一个 div 和我的代码，他们将在他们的页面中插入这些代码，因此动画和样式需要内联。我只需要将按钮的图像动画化到 div 中，使其看起来像是滑入。到目前为止，我正在使用相对定位来布置元素。这可能吗？这是我最终需要的布局中的代码。我需要 div "button" 从底部开始动画并降落在底部：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

您可以使用 <style> 标签，但不建议这样做。有关解释，请参阅 here。

Answer 2

如果您使用 just HTML 和内联 CSS 那么答案是否定的。具体来说，@keyframes 不能在内联样式中定义。它们可以在 <style> 标签中定义（正如@Ryan Gee 指出的那样）但是 <style> 标签必须是在头部，排除了横幅广告的可能性。

现在，为了使事情复杂化，有一次 HTML5 引入了 scoped attribute that would let you use the <style> tag in the body, but support has since been dropped from most of the browsers.

如果有人知道巧妙的解决方法，我会非常感兴趣并留下深刻印象！

Answer 3

一个选项是只使用动画 .gif，如果您不依赖于用户在动画开始前点击。

这样你就不会拥有 html 的所有开销。

另一种选择是，根据他们在主机上的访问权限，为他们提供带有动画的完全合格的网页，他们可以将其上传到主机。（或者，您可以托管页面）

然后，您随页面一起提供的 div 将包含一个链接到网页的 iframe，该 iframe 会呈现动画。此选项在 ui 大小调整方面可能没有那么灵敏。

创建带有内联 css 动画的 html 横幅广告

creating a html banner ad with inline css animation

html

css

banner

css-transitions

css-animations