按钮呼吸灯特效

呼吸灯按钮

.btn{
    position:relative ;
    margin-top: 42%;
    left: 45%;
    width: 200px;
    height: 45px;
    bottom: 1cm;
    //位置信息，因人而异，可以不管
    
    box-shadow:0 1px 2px rgba(105, 192, 214, 0.705); 
    //box-shadow阴影效果，也可以营造出发光效果
    
    background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));  
         //上下垂直渐变.from to决定渐变颜色
 
    /*规定动画变换速度：ease-in-out -->动画以低速开始和结束 */
    -webkit-animation-timing-function:ease-in-out;
 
    /*为 @keyframes 动画规定一个名称*/
    -webkit-animation-name:submit;
 
    /*完成一个动画所需时间*/
    -webkit-animation-duration:2500ms;
 
    /*规定动画播放次数：infinite为无限次*/
    -webkit-animation-iteration-count:infinite;
 
    /*规定动画播放方式：alternate为轮流反向播放*/
    -webkit-animation-direction:alternate;
}

@-webkit-keyframes submit {
    0% {
        opacity:.5;     /*元素不透明级别*/
        box-shadow:0 1px 2px rgba(255,255,255,0.1);
    }
    100% {
        opacity:1;
        border:1px solid rgba(59,235,235,2);
        box-shadow:0 1px 30px rgb(245, 244, 173);
    }
}