css 边缘闪光_纯css3闪烁动画《发光的边框效果》

/* 动画闪烁颜色 */

@-webkit-keyframes greenPulse {

from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }

to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes bluePulse {

from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }

50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }

to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }

}

@-webkit-keyframes magentaPulse {

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

50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }

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

}

/* 重复动画 */

a.button{-webkit-animation-iteration-count: infinite;}

/* 动画名称、动画完成时间 */

.greenPulse.button{-webkit-animation-name:greenPulse;-webkit-animation-duration: 3s;}

.bluePulse.button{-webkit-animation-name:bluePulse;-webkit-animation-duration:3s;}

.magentaPulse.button{-webkit-animation-name:magentaPulse;-webkit-animation-duration:3s;}