html如何出现闪烁效果,前端css怎么实现一闪一闪的特效？

代码在这里了，纯css3,用动画实现

body {

background-color: #151515;

}

.super-input input {

background: #222;

background: -webkit-linear-gradient(#333, #222);

background: -moz-linear-gradient(#333, #222);

background: -o-linear-gradient(#333, #222);

background: -ms-linear-gradient(#333, #222);

background: linear-gradient(#333, #222);

border: 1px solid #444;

border-radius: 5px 0 0 5px;

box-shadow: 0 2px 0 #000;

color: #888;

display: block;

float: left;

font-family: 'Cabin', helvetica, arial, sans-serif;

font-size: 13px;

font-weight: 400;

height: 40px;

margin: 0;

padding: 0 10px;

text-shadow: 0 -1px 0 #000;

width: 200px;

}

/*这里是重点*/

.super-input input:focus {

-webkit-animation: glow 800ms ease-out infinite alternate;

-moz-animation: glow 800ms ease-out infinite alternate;

-o-animation: glow 800ms ease-out infinite alternate;

-ms-animation: glow 800ms ease-out infinite alternate;

/*这里使用了呼吸动画*/

animation: glow 800ms ease-out infinite alternate;

background: #222922;

background: -webkit-linear-gradient(#333933, #222922);

background: -moz-linear-gradient(#333933, #222922);

background: -o-linear-gradient(#333933, #222922);

background: -ms-linear-gradient(#333933, #222922);

background: linear-gradient(#333933, #222922);

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

color: #efe;

outline: none;

}

/*以下定义动画帧*/

@-webkit-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-moz-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-o-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@-ms-keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}

@keyframes glow {

0% {

border-color: #393;

box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

}

100% {

border-color: #6f6;

box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

}

}