使用CSS创建超酷的动感霓虹效果

霓虹灯效果可以给网站增添漂亮酷炫的未来感。使用CSS就可以创建这种效果，并且你还可以添加动画使霓虹灯看起来更动感。

为了更容易理解，下面使用3个例子来展示如何使用CSS创建超酷的动感霓虹效果。示例中主要用到CSS的 text-shadow ，animation 和 @keyframes 属性。其中 text-shadow 需要四个值，前两个分别代表阴影的水平和垂直位置，第三个值表示模糊半径的大小，而最后一个值表示阴影的颜色。然后使用 @keyframes 创建我们想要的帧动画。

示例一

CSS

/* Example 1 */
.neonText-1 {
	font-family: "Lobster";
	color: #fff;
	text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      0 0 82px #0fa,
      0 0 92px #0fa,
      0 0 102px #0fa,
      0 0 151px #0fa;
	animation: flicker 1.5s infinite alternate;  
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}

示例二

CSS

/* Example 2 */
.neonText-2 {
	font-family: "Monoton";
    color: #fff;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #f09,
      0 0 82px #f09,
      0 0 92px #f09,
      0 0 102px #f09,
      0 0 151px #f09;
	animation: pulsate2 1.5s infinite alternate;   
 }

@keyframes pulsate2 {
  100% {
      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #f09,
      0 0 80px #f09,
      0 0 90px #f09,
      0 0 100px #f09,
      0 0 150px #f09;
  }
  
  0% {
    text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #f09,
    0 0 45px #f09,
    0 0 55px #f09,
    0 0 70px #f09,
    0 0 80px #f09;
	}
}

示例三

CSS

/* Example 3 */
.neonText-3 {
  font-family: "Black Ops One";
  color: #fff;
  text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #5271ff,
      0 0 82px #5271ff,
      0 0 92px #5271ff,
      0 0 102px #5271ff,
      0 0 151px #5271ff;
	animation: pulsate3 0.11s ease-in-out infinite alternate;
}	

@keyframes pulsate3 {
   
  100% {
      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #5271ff,
      0 0 80px #5271ff,
      0 0 90px #5271ff,
      0 0 100px #5271ff,
      0 0 150px #5271ff;
  }
  
  0% {
    text-shadow:
    0 0 4px #fff,
    0 0 10px #fff,
    0 0 18px #fff,
    0 0 38px #5271ff,
    0 0 73px #5271ff,
    0 0 80px #5271ff,
    0 0 94px #5271ff,
    0 0 140px #5271ff;
	}
    
}

上面的所有示例可在 这里 查看完整效果和代码。