html 呼吸灯按钮效果,使用Keyframes制作纯CSS呼吸灯效果按钮

在开始今天的内容之前，首先来简单地了解一下 Keyframes，Keyframes 是 W3C

草案中 Animation

模块的一部分。在 Keyframes

中，每一组动画都可以赋予一个名称，通过它可以灵活地定义元素要执行的动画。遗憾的是，到目前为止，只有 WebKit

内核的浏览器支持这一特性，所以本文右上角那一排图标，只有 Chrome 和 Safari

被点亮。但这并不影响我们学习这一技术，局部差异化开发，一直都是

CSS3 和 HTML5 先行者坚持的立场。另外国内的搜狗浏览器在高速模式下，也是使用的 WebKit

内核，极不情愿使用 IE 但又不得不用 IE 的同学们可以试一试。

那么我们开始一步步地制作一个带呼吸灯效果的按钮。首先我们在页面中放置一个 a 标签，并为它定义好基本的样式：

a.demo {

display:block;

line-height: 30px;

width: 80px;

text-align: center;

margin: 100px auto;

background: #80CB1B;

font-size: 16px;

padding: 8px 19px 9px;

-moz-box-shadow: 0 0 5px #343434;

-webkit-box-shadow: 0 0 5px #fff;

box-shadow: 0 0 5px #343434;

color: #fff;

font-weight: bold;

padding: 5px 10px;

text-decoration: none;

text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);

}

为了顺利完成最终效果，接下来我们需要了解一下如何通过 Keyframes 定义一组动画，Keyframes

的定义实际上是非常简单的，下面是 W3C 提供的实例代码：

@keyframes 'wobble' {

0% {

left: 100px;

}

40% {

left: 150px;

}

60% {

left: 75px;

}

100% {

left: 100px;

}

}

上面的代码中，定义了一个名为 wobble 的动画，它将在动画开始的时候(0%)，将元素的位置的定位到 100px，然后过渡到

150px，75px，最后在结束动画的时候(100%)回到起始位置。这实际上是一个让元素水平摆动的动画，它看上去非常的简单。代码中的

0% 和 100% 可以分别使用 from 和 to 来代替，表示动画起始和终止时的状态，其他时候的状态则使用百分比来定义，对

Flash 有一些了解的同学，可以把它理解为 Flash 中的关键帧。接下来是我们的呼吸灯按钮的keyframes

定义，这组动画被命名为 breathingLight

，并且在动画起始、结束、和中间位置插入“关键帧”，重设元素的背景色和阴影：

@-webkit-keyframes 'breathingLight' {

from {

background-color: #80CB1B;

-webkit-box-shadow:0 0 5px #ccc;

}

50% {

background-color: #B7F20F;

-webkit-box-shadow: 0 0 10px #398B08;

}

to {

background-color: #80CB1B;

-webkit-box-shadow:0 0 5px #ccc;

}

}

keyframes 定义好了以后，需要告诉浏览器怎么去调用刚才定义好的名为 breathingLight

的动画。很显然，我们应该在最初添加到页面中的 a 元素进行设定：

a.demo {

-webkit-animation-name: breathingLight;

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: infinite;

}

事实上，到此为止，我们应该已经能够看到下面的效果了，一呼一吸，一亮一暗，比起以前单调死板的按钮，显然更能让人眼前一亮：

然而，我们仍然需要对上面的代码进行理解，以便以后能够灵活地运用。在这个应用中，为了执行动画，按钮被添加了 3

个属性，第一个属性 -webkit-animation-name，是为元素指定要执行的动画名，也就是刚才我们定义的

keyframes 。 第二个属性 -webkit-animation-duration 很好理解，它声明了一次动画执行的时间，这里设定为了3秒。第三个属性 -webkit-animation-iteration-count 定义了元素执行动画的次数，默认值是1次，也可以指定次数，这里的

infinite 顾名思义就是无限地循环执行。事实上定义动画的属性不只是局限于这 3

个，完整的属性和它们的用途在下面的表格中，在实际代码编写时，记得为这些属性名加上 -webkit 的私有前缀。

属性

可用值

描述

animation-name

name

动画名

animation-duration

time

动画执行的时间

animation-timing-function

ease、linear 等

动画函数

animation-iteration-count

infinite、number

重复次数

animation-direction

normal | alternate

反转动画方向

animation-delay

time

延时