点状世界地图-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Dots World Map</title>
    <style>
        body {
            margin: 0;
            display: grid;
            height: 100vh;
            place-items: center;
            background-color: #000;
            font-size: 12px;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(55, 1fr);
            grid-template-rows: repeat(35, 1fr);
        }

        .cell {
            width: 1em;
            height: 1em;
        }

        .cell:nth-child(19) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -993ms;
        }

        .cell:nth-child(20) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1197ms;
        }

        .cell:nth-child(21) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3715ms;
        }

        .cell:nth-child(73) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -31ms;
        }

        .cell:nth-child(74) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3400ms;
        }

        .cell:nth-child(75) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1716ms;
        }

        .cell:nth-child(76) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -702ms;
        }

        .cell:nth-child(77) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -674ms;
        }

        .cell:nth-child(123) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3840ms;
        }

        .cell:nth-child(124) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2066ms;
        }

        .cell:nth-child(127) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3552ms;
        }

        .cell:nth-child(128) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -904ms;
        }

        .cell:nth-child(129) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1075ms;
        }

        .cell:nth-child(130) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2301ms;
        }

        .cell:nth-child(131) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3481ms;
        }

        .cell:nth-child(132) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -727ms;
        }

        .cell:nth-child(177) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3589ms;
        }

        .cell:nth-child(178) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2428ms;
        }

        .cell:nth-child(179) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -62ms;
        }

        .cell:nth-child(181) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -93ms;
        }

        .cell:nth-child(182) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3844ms;
        }

        .cell:nth-child(183) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2587ms;
        }

        .cell:nth-child(184) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1273ms;
        }

        .cell:nth-child(185) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3625ms;
        }

        .cell:nth-child(186) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2450ms;
        }

        .cell:nth-child(187) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3210ms;
        }

        .cell:nth-child(188) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -407ms;
        }

        .cell:nth-child(228) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -508ms;
        }

        .cell:nth-child(229) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2021ms;
        }

        .cell:nth-child(230) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -847ms;
        }

        .cell:nth-child(231) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -106ms;
        }

        .cell:nth-child(232) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2533ms;
        }

        .cell:nth-child(233) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1207ms;
        }

        .cell:nth-child(234) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1481ms;
        }

        .cell:nth-child(237) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3572ms;
        }

        .cell:nth-child(238) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1463ms;
        }

        .cell:nth-child(239) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -738ms;
        }

        .cell:nth-child(240) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -933ms;
        }

        .cell:nth-child(241) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1418ms;
        }

        .cell:nth-child(242) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3973ms;
        }

        .cell:nth-child(243) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1470ms;
        }

        .cell:nth-child(283) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1718ms;
        }

        .cell:nth-child(284) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -147ms;
        }

        .cell:nth-child(285) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3913ms;
        }

        .cell:nth-child(286) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2920ms;
        }

        .cell:nth-child(287) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1728ms;
        }

        .cell:nth-child(288) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1608ms;
        }

        .cell:nth-child(289) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1848ms;
        }

        .cell:nth-child(293) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2496ms;
        }

        .cell:nth-child(294) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2140ms;
        }

        .cell:nth-child(295) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -897ms;
        }

        .cell:nth-child(296) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1160ms;
        }

        .cell:nth-child(297) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -390ms;
        }

        .cell:nth-child(332) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3177ms;
        }

        .cell:nth-child(333) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2907ms;
        }

        .cell:nth-child(334) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -563ms;
        }

        .cell:nth-child(337) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1867ms;
        }

        .cell:nth-child(339) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -317ms;
        }

        .cell:nth-child(340) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1062ms;
        }

        .cell:nth-child(341) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2222ms;
        }

        .cell:nth-child(342) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2970ms;
        }

        .cell:nth-child(343) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -412ms;
        }

        .cell:nth-child(348) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1792ms;
        }

        .cell:nth-child(349) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1878ms;
        }

        .cell:nth-child(350) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -503ms;
        }

        .cell:nth-child(351) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1284ms;
        }

        .cell:nth-child(352) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -32ms;
        }

        .cell:nth-child(387) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2577ms;
        }

        .cell:nth-child(388) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1630ms;
        }

        .cell:nth-child(389) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2371ms;
        }

        .cell:nth-child(390) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -340ms;
        }

        .cell:nth-child(391) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3937ms;
        }

        .cell:nth-child(392) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -189ms;
        }

        .cell:nth-child(393) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -466ms;
        }

        .cell:nth-child(394) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2761ms;
        }

        .cell:nth-child(395) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3304ms;
        }

        .cell:nth-child(396) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3506ms;
        }

        .cell:nth-child(397) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3271ms;
        }

        .cell:nth-child(398) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -676ms;
        }

        .cell:nth-child(399) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2138ms;
        }

        .cell:nth-child(404) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -938ms;
        }

        .cell:nth-child(405) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3820ms;
        }

        .cell:nth-child(406) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3248ms;
        }

        .cell:nth-child(407) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1740ms;
        }

        .cell:nth-child(441) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -973ms;
        }

        .cell:nth-child(442) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1346ms;
        }

        .cell:nth-child(443) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1349ms;
        }

        .cell:nth-child(444) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3381ms;
        }

        .cell:nth-child(445) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1841ms;
        }

        .cell:nth-child(446) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1391ms;
        }

        .cell:nth-child(447) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2382ms;
        }

        .cell:nth-child(448) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1125ms;
        }

        .cell:nth-child(449) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1525ms;
        }

        .cell:nth-child(450) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1067ms;
        }

        .cell:nth-child(451) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3518ms;
        }

        .cell:nth-child(452) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2391ms;
        }

        .cell:nth-child(453) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2742ms;
        }

        .cell:nth-child(454) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1933ms;
        }

        .cell:nth-child(455) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1815ms;
        }

        .cell:nth-child(459) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -2010ms;
        }

        .cell:nth-child(460) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3635ms;
        }

        .cell:nth-child(497) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -88ms;
        }

        .cell:nth-child(498) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1124ms;
        }

        .cell:nth-child(499) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3013ms;
        }

        .cell:nth-child(500) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1732ms;
        }

        .cell:nth-child(501) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -712ms;
        }

        .cell:nth-child(502) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1886ms;
        }

        .cell:nth-child(503) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -78ms;
        }

        .cell:nth-child(504) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1406ms;
        }

        .cell:nth-child(505) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -3421ms;
        }

        .cell:nth-child(506) {
            background-color: #222;
            font-size: 0.5em;
            border-radius: 50%;
            animation: north-america 4s linear infinite;
            animation-delay: -1221ms;
        }

        .cell:nth-child(507) {
            background-col.........完整代码请登录后点击上方下载按钮下载查看