css 框架彩色闪动边框怎么做？

效果图：

最近有很多小伙伴，在问我这个 “技术导航” 的闪动彩色框架是怎么做的？

是不是JS来实现的，当然啦实际上不需要JS直接CSS就可以实现了！

那么怎么操作呢？请看下面教程：

首先在你网站的主要CSS（最好是全局加载的CSS）里面添加以下代码：

@keyframes glow {      50% {
	box-shadow: 0 0 5px #FF5722;      }      10% {
	box-shadow: 0 0 5px #e022d2;      }      20% {
	box-shadow: 0 0 5px #E91E63;      }      40% {
	box-shadow: 0 0 5px #fbff07;      }      60% {
	box-shadow: 0 0 5px #03f5d0;      }      80% {
	box-shadow: 0 0 5px #FF5533;      }  }
}

然后找到相应的CSS框架

审查元素，可以完全看到这这个框架的起始CSS（.indexWebList1）那么，在右侧我们能够明显看到 .indexWebList1 

里面包含的代码，我们找到这个CSS 添加以下代码（实例图已经添加了）：

animation: glow 1000ms ease-out infinite alternate;

1000MS表示闪动频次，自己设置就好了越小越快！建议1000MS。

关于你说你不知道是哪一个.CSS文件那么你审查完元素往右边看！

同样以技术乐园为例，如图所示就是你这个框架的css文件和所在哪一行！

编辑最好用相关开发软件去操作，记事本一般人玩不转！

推荐使用：notepad++

演示站点：http://www.daohangi.com