大数据热点分析图源码

 
        body{
            background-color: #333;
        }
        .map{
            position: relative;
            width: 746px;
            height: 617px;
            margin: 30px auto;
            background: url(../images/map.png);
        }
        .city{
            position: absolute;
            top: 227px;
            right: 193px;
            border-radius: 50%;
            width: 8px;
            height: 8px;
            background-color: skyblue;
        }
        .city1{
            top: 500px;
            right: 80px;
        }
        .city2{
            top: 543px;
            right: 193px;
        }
        .city3{
            top: 391px;
            right: 210px;
        }
        .city3::after{
            content: "湖北";
            position: absolute;
            top: -4px;
            display: inline-block;
            width: 41px;
            color: rgb(168, 168, 169);
            box-sizing: border-box;
            font-weight: 700;    
            font-size: 4px;
            margin-left: 16px;
            margin-top: 0px;
        }
        .pao{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px skyblue;
            border-radius: 50%;
            animation: pao 1s linear infinite;
        }
        @keyframes pao{
            0%{

            }
            30%{
                width: 15px;
                height: 15px;
            }
            70%{
                width: 30px;
                height: 30px;
            }
            100%{
                width: 45px;
                height: 45px;
            }
        }
        .new1{
            animation-delay:.4s;
        }
        .new2{
            animation-delay:.6s;
        }