animation实现一闪一闪效果

附图：

1.html

class="radius">
    class="animate-radius">
    888

2.css

.radius{width: 100px;
    height: 100px;
    margin: 100px auto;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #ff8533;
    position: relative;
}
.animate-radius{width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: #ff8533;
    animation:radius 1.5s ease-out infinite forwards;
    -webkit-animation: radius 1.5s ease-out infinite forwards;
    -moz-animation:radius 1.5s ease-out infinite forwards;
    -ms-animation:radius 1.5s ease-out infinite forwards;
}
@keyframes radius {0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
        }50%{transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-webkit-keyframes radius {0%{transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }100%{transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-moz-keyframes radius {0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }50%{transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}
@-ms-keyframes radius {0%{  transform: scale(1,1);
        -webkit-transform:scale(1,1) ;
        -moz-transform:scale(1,1) ;
        -ms-transform:scale(1,1) ;
        opacity: 0.6;
    }50%{transform: scale(1.4,1.4);
        -webkit-transform:scale(1.4,1.4) ;
        -moz-transform:scale(1.4,1.4) ;
        -ms-transform:scale(1.4,1.4) ;
        opacity: 0;
    }
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！