CSS3实现发光的边框效果

有些网站中的input输入框选中时，可以看到边框发亮的渐变效果，由于需要，这里要做一个块的边框发亮效果，如图所示。

CSS代码如下：

@-webkit-keyframes  shineRed {

from { -webkit-box-shadow: 0 0 5px #bbb; }

50% { -webkit-box-shadow: 0 0 10px red; }

to { -webkit-box-shadow: 0 0 5px #bbb; }

}

@-webkit-keyframes shineBlue {

       from { -webkit-box-shadow: 0 0 9px #333; }

       50% { -webkit-box-shadow: 0 0 18px blue; }

       to { -webkit-box-shadow: 0 0 9px #333; }

}

.shine_red{

-webkit-animation-name: shineRed; 

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: infinite; 

}

HTML代码如下：

<ul>

       <li class=”shine_red”></li>

       <li class=”shine_blue></li>

</ul>

 

 

@-webkit-keyframes是对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态，后面跟的是用到的动画的名称，这里是shineRed（自定义的，方便记忆，红色发光取名为shineRed）。

具体就相当于一个时间轴，from表示刚开始的时候，to表示结束的时候，里面的样式都是可以自己定义的。

 

-webkit-animation-name就是调用上面定义的动画。

 

-webkit-animation-iteration-count表示动画的循环次数，用infinite表示无线循环。