大資料熱點圖

實作熱點圖結構（需要一個大盒子放地圖，大盒子中間放一個中盒子放熱點圖，中盒子里面放四個小盒子一個是中心點不動，另外三個盒子給他們設定陰影，讓他們依次動起來，酷酷的感覺），
效果圖：
在這里插入圖片描述

結構：

<body>
    <div class="map">
        <div class="bigbox">    
            <div class="dotted"></div>
            <div class="sonbox1"></div>
            <div class="sonbox2"></div>
            <div class="sonbox3"></div>
        </div>
        <div class="bigbox tb">
            <div class="dotted"></div>
            <div class="sonbox1"></div>
            <div class="sonbox2"></div>
            <div class="sonbox3"></div>
        </div>
        <div class="bigbox guangzhou">
            <div class="dotted"></div>
            <div class="sonbox1"></div>
            <div class="sonbox2"></div>
            <div class="sonbox3"></div>
        </div>
    </div>
    </div>
</body>

樣式：

<style>
        body {
            background-color: #333;  
        }
        
        .map {
            position: relative;        // 給地圖設定相對定位，為了更好的移動地圖下面的圓圈
            width: 747px;
            height: 616px;
            background: url(./media/map.png) no-repeat;
            margin: 30px auto;
        }
        
        .bigbox {
            position: absolute;                                           
            top: 226px;
            left: 545px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
        }
        
        .tb {                 // 臺北的小盒子
            top: 496px;
            left: 654px;
        }
        
        .guangzhou {    // 廣州的小盒子
            top: 543px;
            left: 544px;
        }
        
        .bigbox .dotted {           // 設定中心點
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #09f;
        }
        
        .bigbox [class^=sonbox] {              // 絕對定位給所有的圓圈設定圍繞中心點發散，再給她添加影片，依次運動
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: fangda 1.2s linear infinite;
        }
        
        @keyframes fangda {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 80px;
                height: 80px;
                opacity: 0;
            }
        }
        
        .bigbox .sonbox2 {
            animation-delay: 0.4s;
        }
        
        .bigbox .sonbox3 {
            animation-delay: 0.8s;
        }
    </style>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/352165.html

標籤：其他

上一篇：Zookeeper原始碼決議-Follower節點處理客戶端請求全程序分析

下一篇：Flink原始碼漫游指南＜二＞：全能管家StreamExecutionEnviornment

大資料熱點圖制作（微重點）

大資料熱點圖