纯CSS3实现炫酷大数据圆圈动态发光特效动画

//html
<div class="circle-wrap" v-if="isFocusProgress">
                    <div class="circle">
                         <div class="big-circle"></div>
                         <div class="small-circle"></div>
                     </div>
                 </div>
   // css
      @keyframes twinkling {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.12);
    }

    100% {
        opacity: 0.2;
        transform: scale(1);
    }
}
 & > .circle-wrap {
                    position: absolute;
                    right: - pxTorem(38);
                    top: 50%;
                    transform: translateY(-50%);

                    & > .circle {
                        position: relative;
                        width: pxTorem(50);
                        height: pxTorem(50);

                        & > .small-circle {
                            border-radius: 50%;
                            width: pxTorem(26);
                            height: pxTorem(26);
                            background: $theme1_C1;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            z-index: 3;
                        }

                        & > .big-circle {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background: $theme1_B0;
                            animation: twinkling 1.6s infinite ease-in-out;
                            animation-fill-mode: both;
                        }
                    }
                }