css实现圆点向外扩散的效果

效果图

HTML代码

<span class="dot">
    <span class="dot-inner"></span>
</span>

CSS代码

<style>
    .dot {
        display: inline-block;
        position: relative;
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 50%;
        margin-right: 10px;

    }

    .dot-inner {
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: vabDot 1.2s ease-in-out infinite;
        animation: vabDot 1.2s ease-in-out infinite;
    }

    @-webkit-keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }

    @keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }
</style>