制作 JS 广告的简易入门（二）利用 CSS3 技术制作广告

HTML5 Family: CSS3 Ads Versus Flash Ads
http://www.sencha.com/blog/html5-family-css3-ads-versus-flash-ads
July 20, 2010
作者：Arne Bech
翻译：Frank / Zhangxin09

说明：本来该系列的文章的文体是属于学习笔记之类的，但是这一篇是翻译的文章。实际上，在（一）的开篇中已经有提到 HTML 5 的地方，虽然只是开头的轻微提及，也是属于非常新鲜的技术，于是细想一下，不失为可深入的领域，算是一个“引子”吧。我接着决定翻译一篇来自 Sencha.com/blog 文章，看中的就是操作性较强，叙述的地方深入浅出，具有一定的代表性，适合于了解 CSS3 以及初学。

开场白

我们一直都在谈论 HTML5 的各门技术。现在，我们就想把一些有趣的、能够直达 CSS3 核心威力的特性发掘出来。特别我们的想法是，你是不是可以把那些见过的 Flash 广告以 HTML5 的技术重演一遍。事实证明，与其说你需要 HTML5，却不如说真的需要的是电子素材和 CSS3 动画，CSS3 动画即为 Chrome 和 Safari 浏览器现正在做的工作。看看三种流行的 Flash 广告和我们的 CSS3 做的两者加以比较就会发现，结果有点不可思议。

余下篇幅，我们将告诉你如何只用 CSS3/HTML 去创建一个广告。我们最近投放了一则 Hertz 广告，为简易起见，这里就拿那幅广告去作为示范蓝本，重点就是重新制作 CSS3 版本的。虽然两种制作的广告看起来不会百分百一样（例如我们不知道使用的字体和颜色）但也是非常接近的了。

点击观看演示，看看你能不能从这些广告中，分辨出哪个是 Flash 做的，哪个不是，而用 CSS3 做的。

如果你熟悉基本 WebKit 的动画属性，那么说明你已有一定的底子。比如，你应该能够理解这一点：

#objectIdToAnimate {
    -webkit-animation-name: slideAnimation;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes slideAnimation { 0% { -webkit-transform: translateX(130px); } 100% { -webkit-transform: translateX(0); }
}

广告

Hertz 广告包括以下主要组件：

1. 静态元素 Static Elements
2. 动态文字 Animated Text
3. 汽车对象 Car
4. 按钮 Button

由于我们不是从头开始创建广告，所以我们将从 Flash 广告中（汽车、标识、按钮的三角型）提取的三幅图像。其他的则使用 HTML 和 CSS 重新创建。

设置

可以通过几种方法设置广告的参数。对于当前广告，我们把所有元素进行绝对的定位（absolute positioning ）。要做到这一点，但是又要保持页面流的话，我们得设置广告的最外层容器为一个相对定位（relative positioning）。这使得我们既能够把使用的广告元素绝对定位，又可以在页面上放置静态的广告。

另外，我们禁止溢出 overflow，这样保证某些元素（如汽车的元素）将不会溢出广告显示的范围。

#adContainer {
    position: relative;
    overflow: hidden;
    ...
}

广告元素其 div 都使用绝对定位来组织层次。我们所有的 div，均分配唯一的 ID 来与 CSS 相吻合。在 CSS 中，我们安排所有的元素都在动画的最后一帧（就像你在广告结束运行后的样子）。最后一帧就是任何东西都是不可见的，于是我们可以设置其不透明度为零或把它抛到广告边界以外。这也确保了该广告在不支持 -webkit 动画的浏览器（如 Firefox）中出现状况而不会太糗。

HTML 结构如下：

<div id="“AdContainer”">
    <div id="“CarSlider”">
        <div id="“Car”"><img alt="" /></div>
    </div>
    <div id="“Text”">
        <div id="“Text1”">Pay for standard.</div>
        …
    </div>

    …

    <div id="“WhiteBox”">
        <div id="“WhiteBoxText”">AAA Mem…</div>
        <div id="“WhiteBoxLogo”"><img alt="" /></div>
    </div>
</div>

组织动画

有几种方式来组织 CSS 动画和时间轴。对于这个广告的制作，我们希望保持它教学上的简单，也就是说，在页面开始加载的时候便加载所有的动画，并让它们的持续时间设为相同（鼠标的动画则不再此列），以便我们写代码的时候，能够很容易地看出动画之间的不同。

但是也有个问题，便是在多个动画同时运行的时候，由于同时一起运行的缘故，所以无法很好地调整动画的高度。

文字动画

文本不会动，所以我们要做的的便是动画化文本的不透明度。

@-webkit-keyframes text1 {
    0%   { opacity: 0; }
    6%   { opacity: 0; }
    8%   { opacity: 1; }
    24%  { opacity: 1; }
    28%  { opacity: 0; }
    100% { opacity: 0; }
}

这里是三个动画（每一段文字之一）的第一。

汽车动画

要简化动画，我们需要把汽车通过分层来分裂出两个独立层的动画：即在一个大的 div 的里面，包含一个弹跳的动画和一个幻灯片汽车的动画。

然而， CSS3 没有针对此问题提供直接的解决方式，以动画衰减波，但我们可以得到一个满意的结果，使用默认ease-in/out计时功能和定义在“顶”和“自下而上”的反弹的关键帧。

下面的 CSS 的使用关键帧来做反弹：

@-webkit-keyframes bounceAnimation {
    0%    { -webkit-transform: scale(0.2);  }
    3%    { -webkit-transform: scale(0.57); }
    4.5%  { -webkit-transform: scale(0.42); }
    5.5%  { -webkit-transform: scale(0.50); }
    6%    { -webkit-transform: scale(0.48); }

    25%   { -webkit-transform: scale(0.48); }
    28%   { -webkit-transform: scale(1.2);  }
    29.5% { -webkit-transform: scale(0.9);  }
    30.5% { -webkit-transform: scale(1.05); }
    31.0% { -webkit-transform: scale(1);    }

    100%  { -webkit-transform: scale(1);    }
}

既然这样，这个尺度的车，从图像中心开始，所以我们需要添加额外的样式的汽车在移动变换的起源以及汽车底部放在汽车底部方，而不是顶部的广告。

-webkit-transform-origin: center bottom;
bottom: 0;

插入汽车也非常简单：

@-webkit-keyframes slideAnimation {
    0%   { -webkit-transform: translateX(-130px); }
    55%  { -webkit-transform: translateX(-130px); }
    66%  { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(0); }
}

按钮动画

我们插入按钮的方式一如插入汽车的方式那般。

我们想鼠标悬停时来点变化，一般做法就是改变它的属性。以往我们是“生硬”地变化，现在我们希望施以动画化的效果以致让人们感觉不太“生硬”，具体说，就是利用 WebKit 的 transform 属性来变化颜色就可以了。

进一步讲，要向前迈进了一步，我们也想重新移动的“闪耀”的效果，按钮的背景。这其实也可以使用刚才的CSS。首先，我们创建一个渐变背景的按钮，然后移动该背景就可以了。

如下所示：

#button:hover {
    background: -webkit-gradient(
                    linear,
                    left top,
                    right 50,
                    color-stop(0.45, #1D5365),
                    color-stop(0.5,  #338DAD),
                    color-stop(0.55, #1D5365)
                );
    background-position: left top;

    -webkit-background-size: 300px 22px;
    -webkit-animation-name: backgroundShine;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes backgroundShine {
  0%   { background-position: right top; }
  100% { background-position: left top; }
}

总得来说，该广告还算非常 alpha 的阶段，仅在较新版本的 WebKit 浏览器中（如 Safari 4、Chrome 5、移动版 Safari）支持；Android 的机子可以运行动画只是有点瑕疵而已；若在不支持的浏览器中也可以实现平稳地降级，如 Firefox 和 IE7+ 的话便会显示最后一帧的图片；若降级到 IE6 的话则主要是 PNG2GIF 的转换问题。

用 CSS3 来制作动画这一课题有着广阔的前景，本文介绍的只是最重要的部分。请在 Js堂 下载本文所涉及的源码程序（约300 行左右）。