svg+css实现点点汇集成世界地图效果代码
代码语言：html
所属分类：布局界面
代码描述：svg+css实现点点汇集成世界地图效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
width: 100vw;
background-color: #123;
color: #9ab;
}
svg {
width: 100vw;
height: 100vh;
}
.sparkle use {
animation: sparkle 5s linear infinite;
}
.sparkle use:nth-child(1n) {
animation-delay: -0.5s;
}
.sparkle use:nth-child(2n) {
animation-delay: -1s;
}
.sparkle use:nth-child(3n) {
animation-delay: -1.5s;
}
.sparkle use:nth-child(4n) {
animation-delay: -2s;
}
.sparkle use:nth-child(5n) {
animation-delay: -2.5s;
}
.sparkle use:nth-child(6n) {
animation-delay: -3s;
}
.sparkle use:nth-child(7n) {
animation-delay: -3.5s;
}
.sparkle use:nth-child(8n) {
animation-delay: -4s;
}
.sparkle use:nth-child(9n) {
animation-delay: -4.5s;
}
.sparkle use:nth-child(10n) {
animation-delay: -5s;
}
@keyframes sparkle {
0%, 80%, 100% {
color: currentcolor;
}
90% {
color: transparent;
}
}
</style>
</head>
<body >
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 2790 1540" fill="currentColor" class="sparkle">
<defs><circle id="dot" cx="0" cy="0" r="10" fill="currentcolor" /></defs>
<use href="#dot" opacity=".3" transform="translate(1152 233)"/>
<use href="#dot" opacity=".3" transform="translate(1236 459)"/>
<use href="#dot" opacity=".3" transform="translate(126 344)"/>
<use href="#dot" opacity=".3" transform="translate(1365 498)"/>
<use href="#dot" opacity=".3" transform="translate(1408 92)"/>
<use href="#dot" opacity=".3" transform="translate(1537 1322)"/>
<use href="#dot" opacity=".3" transform="translate(1755 28)"/>
<use href="#dot" opacity=".3" transform="translate(1843 1279)"/>
<use href="#dot" opacity=".3" transform="translate(196 657)"/>
<use href="#dot" opacity=".3" transform="translate(196 737)"/>
<use href="#dot" opacity=".3" transform="translate(2020 92)"/>
<use href="#dot" opacity=".3" transform="translate(2109 92)"/>
<use href="#dot" opacity=".3" transform="translate(2243 984)"/>
<use href="#dot" opacity=".3" transform="translate(233 498)"/>
<use href="#dot" opacity=".3" transform="translate(2333 59)"/>
<use href="#dot" opacity=".3" transform="translate(2469 459)"/>
<use href="#dot" opacity=".3" transform="translate(307 778)"/>
<use href="#dot" opacity=".3" transform="translate(421 382)"/>
<use href="#dot" opacity=".3" transform="translate(498 860)"/>
<use href="#dot" opacity=".3" transform="translate(537 901)"/>
<use href="#dot" opacity=".3" transform="translate(737 1068)"/>
<use href="#dot" opacity=".3" transform="translate(819 92)"/>
<use href="#dot" opacity=".3" transform="translate(860 92)"/>
<use href="#dot" opacity=".3" transform="translate(901 92)"/>
<use href="#dot" opacity=".3" transform="translate(943 126)"/>
<use href="#dot" opacity=".4" transform="translate(1110 1322)"/>
<use href="#dot" opacity=".4" transform="translate(1110 92)"/>
<use href="#dot" opacity=".4" transform="translate(1236 92)"/>
<use href="#dot" opacity=".4" transform="translate(1322 537)"/>
<use href="#dot" opacity=".4" transform="translate(1365 92)"/>
<use href="#dot" opacity=".4" transform="translate(1408 59)"/>
<use href="#dot" opacity=".4" transform="translate(1494 617)"/>
<use href="#dot" opacity=".4" transform="translate(1537 984)"/>
<use href="#dot" opacity=".4" transform="translate(1580 1068)"/>
<use href="#dot" opacity=".4" transform="translate(161 307)"/>
<use href="#dot" opacity=".4" transform="translate(1624 1026)"/>
<use href="#dot" opacity=".4" transform="translate(1624 126)"/>
<use href="#dot" opacity=".4" transform="translate(1711 943)"/>
<use href="#dot" opacity=".4" transform="translate(1755 697)"/>
<use href="#dot" opacity=".4" transform="translate(1799 819)"/>
<use href="#dot" opacity=".4" transform="translate(1887 1279)"/>
<use href="#dot" opacity=".4" transform="translate(1931 28)"/>
<use href="#dot" opacity=".4" transform="translate(2154 126)"/>
<use href="#dot" opacity=".4" transform="translate(2198 778)"/>
<use href="#dot" opacity=".4" transform="translate(2378 498)"/>
<use href="#dot" opacity=".4" transform="translate(2423 697)"/>
<use href="#dot" opacity=".4" transform="translate(2423 901)"/>
<use href="#dot" opacity=".4" transform="translate(269 196)"/>
<use href="#dot" opacity=".4" transform="translate(269 537)"/>
<use href="#dot" opacity=".4" transform="translate(269 737)"/>
<use href="#dot" opacity=".4" transform="translate(344 344)"/>
<use href="#dot" opacity=".4" transform="translate(344 697)"/>
<use href="#dot" opacity=".4" transform="translate(382 382)"/>
<use href="#dot" opacity=".4" transform="translate(382 697)"/>
<use href="#dot" opacity=".4" transform="translate(421 1279)"/>
<use href="#dot" opacity=".4" transform="translate(421 92)"/>
<use href="#dot" opacity=".4" transform="translate(459 737)"/>
<use href="#dot" opacity=".4" transform="translate(498 1322)"/>
<use href="#dot" opacity=".4" transform="translate(498 344)"/>
<use href="#dot" opacity=".4" transform="translate(577 233)"/>
<use href="#dot" opacity=".4" transform="translate(737 196)"/>
<use href="#dot" opacity=".4" transform="translate(778 92)"/>
<use href="#dot" opacity=".4" transform="translate(860 1279)"/>
<use href="#dot" opacity=".5" transform="translate(1026 1365)"/>
<use href="#dot" opacity=".5" transform="translate(1068 1365)"/>
<use href="#dot" opacity=".5" transform="translate(1110 1365)"/>
<use href="#dot" opacity=".5" transform="translate(1194 382)"/>
<use href="#dot" opacity=".5" transform="translate(126 577)"/>
<use href="#dot" opacity=".5" transform="translate(1365 59)"/>
<use href="#dot" opacity=".5" transform="translate(1408 28)"/>
<use href="#dot" opacity=".5" transform="translate(1451 126)"/>
<use href="#dot" opacity=".5" transform="translate(1451 59)"/>
<use href="#dot" opacity=".5" transform="translate(1494 1322)"/>
<use href="#dot" opacity=".5" transform="translate(1494 498)"/>
<use href="#dot" opacity=".5" transform="translate(1580 269)"/>
<use href="#dot" opacity=".5" transform="translate(161 737)"/>
<use href="#dot" opacity=".5" transform="translate(1624 233)"/>
<use href="#dot" opacity=".5" transform="translate(1668 161)"/>
<use href="#dot" opacity=".5" transform="translate(1668 984)"/>
<use href="#dot" opacity=".5" transform="translate(1711 1322)"/>
<use href="#dot" opacity=".5" transform="translate(1711 657)"/>
<use href="#dot" opacity=".5" transform="translate(1843 126)"/>
<use href="#dot" opacity=".5" transform="translate(1931 1279)"/>
<use href="#dot" opacity=".5" transform="translate(196 269)"/>
<use href="#dot" opacity=".5" transform="translate(1976 459)"/>
<use href="#dot" opacity=".5" transform="translate(2065 1279)"/>
<use href="#dot" opacity=".5" transform="translate(2065 161)"/>
<use href="#dot" opacity=".5" transform="translate(2065 196)"/>
<use href="#dot" opacity=".5" transform="translate(2065 92)"/>
<use href="#dot" opacity=".5" transform="translate(2109 1279)"/>
<use href="#dot" opacity=".5" transform="translate(2198 943)"/>
<use href="#dot" opacity=".5" transform="translate(233 233)"/>
<use href="#dot" opacity=".5" transform="translate(233 697)"/>
<use href="#dot" opacity=".5" transform="translate(269 860)"/>
<use href="#dot" opacity=".5" transform="translate(269 943)"/>
<use href="#dot" opacity=".5" transform="translate(307 577)"/>
<use href="#dot" opacity=".5" transform="translate(307 697)"/>
<use href="#dot" opacity=".5" transform="translate(307 984)"/>
<use href="#dot" opacity=".5" transform="translate(459 382)"/>
<use href="#dot" opacity=".5" transform="translate(537 269)"/>
<use href="#dot" opacity=".5" transform="translate(617 1365)"/>
<use href="#dot" opacity=".5" transform="translate(737 161)"/>
<use href="#dot" opacity=".5" transform="translate(819 161)"/>
<use href="#dot" opacity=".5" transform="translate(901 126)"/>
<use href="#dot" opacity=".6" transform="translate(1026 92)"/>
<use href="#dot" opacity=".6" transform="translate(1068 92)"/>
<use href="#dot" opacity=".6" transform="translate(1494 28)"/>
<use href="#dot" opacity=".6" transform="translate(1580 59)"/>
<use href="#dot" opacity=".6" transform="translate(1711 126)"/>
<use href="#dot" opacity=".6" transform="translate(196 498)"/>
<use href="#dot" opacity=".6" transform="translate(1976 1279)"/>
<use href="#dot" opacity=".6" transform="translate(1976 233)"/>
<use href="#dot" opacity=".6" transform="translate(1976 577)"/>
<use href="#dot" opacity=".6" transform="translate(2020 1279)"/>
<use href="#dot" opacity=".6" transform="translate(2020 382)"/>
<use href="#dot" opacity=".6" transform="translate(2109 307)"/>
<use href="#dot" opacity=".6" transform="translate(2154 307)"/>
<use href="#dot" opacity=".6" transform="translate(2198 1365)"/>
<use href="#dot" opacity=".6" transform="translate(2198 344)"/>
<use href="#dot" opacity=".6" transform="translate(2423 577)"/>
<use href="#dot" opacity=".6" transform="translate(2423 860)"/>
<use href="#dot" opacity=".6" transform="translate(2469 819)"/>
<use href="#dot" opacity=".6" transform="translate(2650 537)"/>
<use href="#dot" opacity=".6" transform="translate(269 577)"/>
<use href="#dot" opacity=".6" transform="translate(307 819)"/>
<use href="#dot" opacity=".6" transform="translate(577 196)"/>
<use href="#dot" opacity=".6" transform="translate(697 196)"/>
<use href="#dot" opacity=".6" transform="translate(819 1279)"/>
<use href="#dot" opacity=".6" transform="translate(92 421)"/>
<use href="#dot" opacity=".6" transform="translate(92 657)"/>
<use href="#dot" opacity=".6" transform="translate(984 1365)"/>
<use href="#dot" transform="translate(1068 161)"/>
<use href="#dot" transform="translate(1236 421)"/>
<use href="#dot" transform="translate(126 657)"/>
<use href="#dot" transform="translate(1365 537)"/>
<use href="#dot" transform="translate(1451 577)"/>
<use href="#dot" transform="translate(1494 161)"/>
<use href="#dot" transform="translate(1494 196)"/>
<use href="#dot" transform="translate(1494 92)"/>
<use href="#dot" transform="translate(1537 1279)"/>
<use href="#dot" transform="translate(1537 819)"/>
<use href="#dot" transform="translate(1624 92)"/>
<use href="#dot" transform="translate(1755 1322)"/>
<use href="#dot" transform="translate(2020 307)"/>
<use href="#dot" transform="translate(2065 126)"/>
<use href="#dot" transform="translate(2198 421)"/>
<use href="#dot" transform="translate(2198 737)"/>
<use href="#dot" transform="translate(2198 901)"/>
<use href="#dot" transform="translate(2243 344)"/>
<use href="#dot" transform="translate(2288 1279)"/>
<use href="#dot" transform="translate(2333 459)"/>
<use href="#dot" transform="translate(2333 901)"/>
<use href="#dot" transform="translate(2378 537)"/>
<use href="#dot" transform="translate(2514 459)"/>
<use href="#dot" transform="translate(2559 459)"/>
<use href="#dot" transform="translate(2696 577)"/>
<use href="#dot" transform="translate(2741 498)"/>
<use href="#dot" transform="translate(382 344)"/>
<use href="#dot" transform="translate(498 59)"/>
<use href="#dot" transform="translate(737 1026)"/>
<use href="#dot" transform="translate(984 126)"/>
<use href="#dot" transform="translate(1026 126)"/>
<use href="#dot" transform="translate(1026 161)"/>
<use href="#dot" transform="translate(1068 126)"/>
<use href="#dot" transform="translate(1110 126)"/>
<use href="#dot" transform="translate(1110 161)"/>
<use href="#dot" transform="translate(1152 126)"/>
<use href="#dot" transform="translate(1152 1322)"/>
<use href="#dot" transform="translate(1152 1365)"/>
<use href="#dot" transform="translate(1152 161)"/>
<use href="#dot" transform="translate(1152 196)"/>
<use href="#dot" transform="translate(1194 126)"/>
<use href="#dot" transform="translate(1194 1322)"/>
<use href="#dot" transform="translate(1194 1365)"/>
<use href="#dot" transform="translate(1194 161)"/>
<use href="#dot" transform="translate(1194 196)"/>
<use href="#dot" transform="translate(1194 233)"/>
<use href="#dot" transform="translate(1194 269)"/>
<use href="#dot" transform="translate(1194 307)"/>
<use href="#dot" transform="translate(1194 344)"/>
<use href="#dot" transform="translate(1236 126)"/>
<use href="#dot" transform="translate(1236 1322)"/>
<use href="#dot" transform="translate(1236 1365)"/>
<use href="#dot" transform="translate(1236 161)"/>
<use href="#dot" transform="translate(1236 196)"/>
<use href="#dot" transform="translate(1236 233)"/>
<use href="#dot" transform="translate(1236 269)"/>
<use href="#dot" transform="translate(1236 307)"/>
<use href="#dot" transform="translate(1236 344)"/>
<use href="#dot" transform="translate(1236 382)"/>
<use href="#dot" transform="translate(126 382)"/>
<use href="#dot" transform="translate(126 421)"/>
<use href="#dot" transform="translate(126 459)"/>
<use href="#dot" transform="translate(126 498)"/>
<use href="#dot" transform="translate(126 537)"/>
<use href="#dot" transform="translate(126 697)"/>
<use href="#dot" transform="translate(1279 126)"/>
<use href="#dot" transform="translate(1279 1322)"/>
<use href="#dot" transform="translate(1279 1365)"/>
<use href="#dot" transform="translate(1279 161)"/>
<use href="#dot" transform="translate(1279 196)"/>
<use href="#dot" transform="translate(1279 233)"/>
<use href="#dot" transform="translate(1279 269)"/>
<use href="#dot" transform="translate(1279 307)"/>
<use href="#dot" transform="translate(1279 344)"/>
<use href="#dot" transform="translate(1279 382)"/>
<use href="#dot" transform="translate(1279 421)"/>
<use href="#dot" transform="translate(1279 459)"/>
<use href="#dot" transform="translate(1279 92)"/>
<use href="#dot" transform="translate(1322 126)"/>
<use href="#dot" transform="translate(1322 1322)"/>
<use href="#dot" transform="translate(1322 1365)"/>
<use href="#dot" transform="translate(1322 161)"/>
<use href="#dot" transform="translate(1322 196)"/>
<use href="#dot" transform="translate(1322 233)"/>
<use href="#dot" transform="translate(1322 269)"/>
<use href="#dot" transform="translate(1322 307)"/>
<use href="#dot" transform="translate(1322 344)"/>
<use href="#dot" transform="translate(1322 382)"/>
<use href="#dot" transform="translate(1322 421)"/>
<use href="#dot" transform="translate(1322 459)"/>
<use href="#dot" transform="translate(1322 498)"/>
<use href="#dot" transform="translate(1322 92)"/>
<use href="#dot" transform="translate(1365 126)"/>
<use href="#dot" transform="translate(1365 1322)"/>
<use href="#dot" transform="translate(1365 1365)"/>
<use href="#dot" transform="translate(1365 161)"/>
<use href="#dot" transform="translate(1365 196)"/>
<use href="#dot" transform="translate(1365 233)"/>
<use href="#dot" transform="translate(1365 269)"/>
<use href="#dot" transform="translate(1365 307)"/>
<use href="#dot" transform="translate(1365 344)"/>
<use href="#dot" transform="translate(1365 382)"/>
<use href="#dot" transform="translate(1365 421)"/>
<use href="#dot" transform="translate(1408 126)"/>
<use href="#dot" transform="translate(1408 1322)"/>
<use href="#dot" transform="translate(1408 1365)"/>
<use href="#dot" transform="translate(1408 196)"/>
<use href="#dot" transform="translate(1408 233)"/>
<use href="#dot" transform="translate(1408 269)"/>
<use href="#dot" transform="translate(1408 307)"/>
<use href="#dot" transform="translate(1408 344)"/>
<use href="#dot" transform="translate(1408 382)"/>
<use href="#dot" transform="translate(1408 421)"/>
<use href="#dot" transform="translate(1408 537)"/>
<use href="#dot" transform="translate(1451 1322)"/>
<use href="#dot" transform="translate(1451 1365)"/>
<use href="#dot" transform="translate(1451 233)"/>
<use href="#dot" transform="translate(1451 269)"/>
<use href="#dot" transform="translate(1451 28)"/>
<use href="#dot" transform="translate(1451 307)"/>
<use href="#dot" transform="translate(1451 344)"/>
<use href="#dot" transform="translate(1451 382)"/>
<use href="#dot" transform="translate(1451 421)"/>
<use href="#dot" transform="translate(1451 92)"/>
<use href="#dot" transform="translate(1494 1365)"/>
<use href="#dot" transform="translate(1494 233)"/>
<use href="#dot" transform="translate(1494 269)"/>
<use href="#dot" transform="translate(1494 307)"/>
<use href="#dot" transform="translate(1494 344)"/>
<use href="#dot" transform="translate(1494 382)"/>
<use href="#dot" transform="translate(1494 697)"/>
<use href="#dot" transform="translate(1494 737)"/>
<use href="#dot" transform="translate(1537 1026)"/>
<use href="#dot" transform="translate(1537 1068)"/>
<use href="#dot" transform="translate(1537 1110)"/>
<use href="#dot" transform="translate(1537 126)"/>
<use href="#dot" transform="translate(1537 1365)"/>
<use href="#dot" transform="translate(1537 196)"/>
<use href="#dot" transform="translate(1537 233)"/>
<use href="#dot" transform="translate(1537 269)"/>
<use href="#dot" transform="translate(1537 28)"/>
<use href="#dot" transform="translate(1537 307)"/>
<use href="#dot" transform="translate(1537 617)"/>
<use href="#dot" transform="translate(1537 657)"/>
<use href="#dot" transform="translate(1537 697)"/>
<use href="#dot" transform="translate(1537 737)"/>
<use href="#dot" transform="translate(1537 778)"/>
<use href="#dot" transform="translate(1580 1026)"/>
<use href="#dot" transform="translate(1580 1365)"/>
<use href="#dot" transform="translate(1580 196)"/>
<use href="#dot" transform="translate(1580 233)"/>
<use href="#dot" transform="translate(1580 28)"/>
<use href="#dot" transform="translate(1580 617)"/>
<use href="#dot" transform="translate(1580 657)"/>
<use href="#dot" transform="translate(1580 697)"/>
<use href="#dot" transform="translate(1580 737)"/>
<use href="#dot" transform="translate(1580 778)"/>
<use href="#dot" transform="translate(1580 819)"/>
<use href="#dot" transform="translate(1580 860)"/>
<use href="#dot" transform="translate(1580 901)"/>
<use href="#dot" transform="translate(1580 943)"/>
<use href="#dot" transform="translate(1580 984)"/>
<use href="#dot" transform="translate(161 344)"/>
<use href="#dot" transform="translate(161 382)"/>
<use href="#dot" transform="translate(161 421)"/>
<use href="#dot" transform="translate(161 459)"/>
<use href="#dot" transform="translate(161 498)"/>
<use href="#dot" transform="translate(161 537)"/>
<use href="#dot" transform="translate(161 577)"/>
<use href="#dot" transform="translate(1624 1365)"/>
<use href="#dot" transform="translate(1624 28)"/>
<use href="#dot" transform="translate(1624 59)"/>
<use href="#dot" transform="translate(1624 617)"/>
<use href="#dot" transform="translate(1624 657)"/>
<use href="#dot" transform="translate(1624 697)"/>
<use href="#dot" transform="translate(1624 737)"/>
<use href="#dot" transform="translate(1624 778)"/>
<use href="#dot" transform="translate(1624 819)"/>
<use href="#dot" transform="translate(1624 860)"/>
<use href="#dot" transform="translate(1624 901)"/>
<use href="#dot" transform="translate(1624 943)"/>
<use href="#dot" transform="translate(1624 984)"/>
<use href="#dot" transform="translate(1668 126)"/>
<use href="#dot" transform="translate(1668 1365)"/>
<use href="#dot" transform="translate(1668 28)"/>
<use href="#dot" transform="translate(1668 59)"/>
<use href="#dot" transform="translate(1668 657)"/>
<use href="#dot" transform="translate(1668 697)"/>
<use href="#dot" transform="translate(1668 737)"/>
<use href="#dot" transform="translate(1668 778)"/>
<use href="#dot" transform="translate(1668 819)"/>
<use href="#dot" transform="translate(1668 860)"/>
<use href="#dot" transform="translate(1668 901)"/>
<use href="#dot" transform="translate(1668 92)"/>
<use href="#dot" transform="translate(1668 943)&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0