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

what7yousay
  • 577

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

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

图片描述

回复
阅读 27.9k
7 个回答
✓ 已被采纳

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;
    }
}

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

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>

图片自己找个箭头

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

可以用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写也是可以的

singine
  • 2
新手上路,请多包涵
海绵宝宝
  • 4
新手上路,请多包涵

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

宣传栏