大数据热点分析图源码

小尘的一天

1622人浏览 · 2022-02-16 14:18:00

小尘的一天 · 2022-02-16 14:18:00 发布

 <style>
        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;
        }
    </style>
</head>
<body>
    <div class="map">
        <!-- 这是盒子 -->
        <div class="city">
            <!-- 这是点和泡 -->
            <!-- <div class="dotted"></div> -->
            <div class="pao"></div>
            <div class="pao new1"></div>
            <div class="pao new2"></div>
        </div>
        <div class="city1 city">
            <!-- 这是点和泡 -->
            <!-- <div class="dotted"></div> -->
            <div class="pao"></div>
            <div class="pao new1"></div>
            <div class="pao new2"></div>
        </div>
        <div class="city2 city">
            <!-- 这是点和泡 -->
            <!-- <div class="dotted"></div> -->
            <div class="pao"></div>
            <div class="pao new1"></div>
            <div class="pao new2"></div>
        </div>
        <div class="city3 city">
            <!-- 这是点和泡 -->
            <!-- <div class="dotted"></div> -->
            <div class="pao"></div>
            <div class="pao new1"></div>
            <div class="pao new2"></div>
        </div>
    </div>
</body>
</html>