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