CSS3设计边框忽隐忽现功能

css3功能很强大哈，实现动画功能很方便，今天在这里分享怎么实现类似星星眨眼，忽隐忽现，一亮一闪的功能……

同样，我们先知道CSS3的几个属性：

1. box-shadow:向框添加一个或多个阴影，

box-shadow: 水平阴影距离(必须） 垂直阴影距离（必须） 模糊距离（可选） 阴影尺寸（可选） 颜色（可选） 阴影类型（可选）;

如：box-shadow: 1em 2em 1em #fff;

2.animation:创建动画，非常强大，不过需要了解@keyframes规则

@keyframes 动画名称 {

from: {css样式;}

to:{css样式;}

}

动画效果设置好后，将其绑定到选择器上，animation：动画名称（必选） 动画时长（必选）；

注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9，以及更早的版本，不支持 @keyframes 规则或 animation 属性。

OK，了解以上概念后，若想实现边框的忽隐忽现功能，设置动画，这里利用box-shadow, 如

@keyframes circle-light {
from { box-shadow: 0 0 10px 5px #fff; }
to { box-shadow: 0 0 0 0 #fff; }
}
@-webkit-keyframes circle-light {
from { box-shadow: 0 0 10px 5px #fff; }
to { box-shadow: 0 0 0 0 #fff; }
}

.home-like img {
display: inline-block;
width: 20%;
height: 20%;
padding: 2%;
border-radius: 50%;
animation: circle-light 1s infinite alternate;
-webkit-animation: circle-light 1s infinite alternate;/*Chrome and Safari*/
}

最终效果如下：

，

我们也可以通过改变opacity来设置效果，不过需要事先设置边框，个人觉得相对麻烦些。

如有更好建议，希望指正，谢谢！