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".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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