【骚气的动效】外发光动画、向外辐射动画效果，通常用于地图上面某一个扩散点效果

/* 外发光动画、向外辐射动画效果 */

$orangeColor: rgba(251, 193, 105, 0.6);
%out-glow {
    &:before,
    &:after {
        background-color: $orangeColor;
        width: 70px;
        height: 70px;
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: -1;
        border-radius: 100%;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        animation: out-glow 1.5s infinite ease-out;
        -moz-animation: out-glow 1.5s infinite ease-out;
        /* Firefox */
        -webkit-animation: out-glow 1.5s infinite ease-out;
        /* Safari 和 Chrome */
        -o-animation: out-glow 1.5s infinite ease-out;
        /* Opera */
        animation-fill-mode: both;
        /*动画播放到最后一帧或者倒放到第一帧停止*/
        -webkit-animation-fill-mode: both;
        /* Safari 和 Chrome */
    }
    &:after {
        animation: out-glow 2.5s infinite ease-out;
        -moz-animation: out-glow 2.5s infinite ease-out;
        /* Firefox */
        -webkit-animation: out-glow 2.5s infinite ease-out;
        /* Safari 和 Chrome */
        -o-animation: out-glow 2.5s infinite ease-out;
        /* Opera */
        -ms-animation: out-glow 2.5s infinite ease-out;
    }
    @keyframes out-glow {
        0% {
            opacity: 0;
            transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(1.5);
        }
    }
    @-moz-keyframes out-glow {
        0% {
            opacity: 0;
            -moz-transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -moz-transform: scale(1.5);
        }
    }
    @-webkit-keyframes out-glow {
        0% {
            opacity: 0;
            -webkit-transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1.5);
        }
    }
    @-o-keyframes out-glow {
        0% {
            opacity: 0;
            -o-transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -o-transform: scale(1.5);
        }
    }
    @-ms-keyframes out-glow {
        0% {
            opacity: 0;
            -ms-transform: scale(0);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -ms-transform: scale(1.5);
        }
    }
}

 

本文地址：https://blog.csdn.net/qq_37860634/article/details/107375410