前端css怎么实现一闪一闪的特效？

Question

现在，我有如下流程，我想让当前的某个位置mary特别显示。想让它一闪一闪地，有种呼吸的感觉，比如边框有特别的颜色也可以。如何实现呢？

例如，以下网页中http://www.17sucai.com/pins/demoshow/4863，这种当鼠标停在上面时候的 呼吸效果。
现在要它自动呼吸。如何实现。前端大神，求解决方法。

Answer 1

demo

---

代码在这里了，纯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;
    }
}

Answer 2

hi，哥们，给你撸了一个，仅供参考
demo

Answer 3

css :

    .u-arrow img {
        animation: start 1.5s infinite ease-in-out;
        -moz-animation: start 1.5s infinite ease-in-out;
        -webkit-animation: start 1.5s infinite ease-in-out;
        -o-animation: start 1.5s infinite ease-in-out;
        -ms-animation: start 1.5s infinite ease-in-out;
        background-position: 0 -82px;
        height: 14px;
        left: 50%;
        margin: -7px 0 0 -14px;
        position: absolute;
        top: 50%;
        width: 24px;
    }
    @-webkit-keyframes start {
        0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
        60% {opacity: 1;-webkit-transform: translate(0,0);}
        100% {opacity: 1;-webkit-transform: translate(0,-8px);}
    }
    @-moz-keyframes start {
        0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
        60% {opacity: 1;-moz-transform: translate(0,0);}
        100% {opacity: 1;-moz-transform: translate(0,-8px);}
    }
    @keyframes start {
        0%,30% {opacity: 0;transform: translate(0,10px);}
        60% {opacity: 1;transform: translate(0,0);}
        100% {opacity: 1;transform: translate(0,-8px);}
    }

html:

    <a class="lr_btn u-arrow u-arrow-bottom" href="javascript:void(0);">
        <img src="/images/btn01_arrow.png">
    </a>

图片自己找个箭头

Answer 4

只能借助JS实现，比如用jQuery

Answer 5

可以用css3动画的keyframes创建动画，用的时候用js添加绑定了动画的类。

<!DOCTYPE html>
<html>
<head>
<style> 
.highlight
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-iteration-count: infinite;
}

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: red;}
}
</style>
</head>
<body>

<div class = "highlight"></div>

</body>
</html>

当然用js写也是可以的

Answer 6

css3 里的 animation 就可以做到，属性可以设置循环次数。请参考http://www.w3school.com.cn/cssref/pr_animation.asp
又或者js、jq也是可以实现的。

Answer 7

animation设置动画 @keyframes设置透明度和过程