css 动画

<div class="quan-box">
 　　逐渐放大消失
<div>

 

 

/*申明一个div的class 用于执行动画*/
 .quan-box{
    opacity: 0;
    background: #70D97C;
    position: absolute;

     //3秒执行完成quan动画，infinite 动画会无限次重复播放，steps(40)表示将整个动画过程分割成40个等大小的间隔
    animation: quan 3s infinite steps(40);   
    //延迟1.8秒开始执行
    animation-delay:1.8s; 
 }

 

 

/*定义一个圈从小到大的动画 ，其中的百分比就是进度，也就是说3秒执行一个动画，到百分之多少要什么样式，可以自己调整*/
@keyframes quan {
         0% { 
            opacity: .8;
            width: 70px;
            height: 70px;
            top: 25px;
            left: 25px;
            border-radius: 50%;
            transform: scale(1);
         }
         10%{
            opacity: .6;
            width: 80px;
            height: 80px;
            top: 20px;
            left: 20px;
            border-radius: 50%;
         }
         15% {
                opacity: 0.5;
               width: 90px;
               height: 90px;
               top: 15px;
               left: 15px;
              border-radius: 50%;
         }
         35% {
             opacity: 0.25;
              width: 100px;
              height: 100px;
              top: 10px;
              left: 10px;
              border-radius: 50%;
             
         }
         50% {
                opacity: .1;
                width: 110px;
                height: 110px;
                top: 5px;
                left: 5px;
                border-radius: 50%;
         }
         100%{
               opacity: 0;
               width: 120px;
               height: 120px;
               top: 0;
               left: 0;
                border-radius: 50%;
         }
}