一天一代码之CSS3动画(大数据热点图)

CSS效果图如下:

CSS代码如下:

.map {
            position: relative;
            widows: 600px;
            height: 489px;
            background: url(timg.jpg) no-repeat;
        }
        
        .shenyang {
            position: absolute;
            top: 158px;
            left: 495px;
        }
        
        .taibei {
            position: absolute;
            top: 397px;
            left: 496px;
        }
        
        .dotted {
            width: 6px;
            height: 6px;
            background-color: red;
            border-radius: 6px;
        }
        
        .ripple1,
        .ripple2,
        .ripple3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            /* 这里要放50%要不然下改变宽高会产生影响 */
            border-radius: 50%;
            border: 1px solid red;
            box-shadow: 0 0 12px red;
        }
        
        .ripple1 {
            animation: move 1s linear infinite;
        }
        
        .ripple2 {
            animation: move 1s linear .2s infinite;
        }
        
        .ripple3 {
            animation: move 1s linear .4s infinite;
        }
        
        @keyframes move {
            0% {}
            70% {
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }

HTML代码如下:

<div class="map">
        <div class="shenyang">
            <div class="dotted"></div>
            <div class="ripple1"></div>
            <div class="ripple2"></div>
            <div class="ripple3"></div>
        </div>
        <div class="taibei">
            <div class="dotted"></div>
            <div class="ripple1"></div>
            <div class="ripple2"></div>
            <div class="ripple3"></div>
        </div>
    </div>

如有疑问欢迎评论区评论