CSS 闪烁

在网页设计中，闪烁是一种常见的装饰效果。CSS提供了不同的方法来实现网页元素的闪烁效果。这里我们列举了几种实现方法。

利用animation实现闪烁

通过animation属性，可以实现元素的周期性变换。在这里我们通过修改元素透明度的属性来实现闪烁。

.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

代码中.blink是我们要进行闪烁的元素，利用animation属性将元素以一定的周期性用blink规则进行变换。blink规则中透明度的值会在不同的时间段内发生变化，最终实现闪烁的效果。

利用闪烁图片实现闪烁

我们也可以利用特殊的PNG图片实现元素的闪烁效果。这里我们使用包含两个相同PNG图片的元素，并不断地轮换其中一张图片的显隐状态。

<div class="blink-image"></div>

.blink-image {
  background: url('path/to/blink-image.png') no-repeat;
  width: 100px;
  height: 100px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: -100px 0;
  }

  100% {
    background-position: 0 0;
  }
}

我们给一个空的div元素添加类名.blink-image，利用background属性将我们的闪烁图片添加为背景图案。然后利用animation属性使元素以blink规则不断地进行变换。blink规则中通过改变background-position属性实现两张图片间的轮换。

利用box-shadow实现闪烁

box-shadow是CSS3提供的属性，可以给元素添加阴影或发光特效。利用box-shadow属性可以实现简单的闪烁效果。

.blink-shadow {
  box-shadow: 0 0 5px 3px #ff0;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    box-shadow: 0 0 5px 3px #ff0;
  }

  50% {
    box-shadow: none;
  }

  100% {
    box-shadow: 0 0 5px 3px #ff0;
  }
}

代码中.blink-shadow是我们要进行闪烁的元素，利用box-shadow属性添加光晕特效。然后利用animation属性进行变换。blink规则中利用box-shadow的none属性使元素在闪烁的过程中出现间歇性的消失。