gsap实现地球日快乐动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现地球日快乐动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #FD79A8;
padding: 1rem;
}
svg {
display: block;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<section class="svg-wrapper">
<svg width="550" height="400" viewBox="0 0 550 400" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="erf-mask">
<path stroke="none" fill="#FFFFFF" d="M371.75 296.75 Q331.9 336.7 275.5 336.7 219.1 336.7 179.2 296.75 139.25 256.95 139.25 200.45 139.25 144.05 179.2 104.15 219.1 64.3 275.5 64.3 331.9 64.3 371.75 104.15 411.75 144.05 411.75 200.45 411.75 256.95 371.75 296.75"/>
</mask>
<mask id="stroke-mask">
<path class="bee-line-mask" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M-100,208.281c52.373,21.079 102.175,-29.742 120,-28.281c21.8,1.787 43.122,18.65 65.54,18.745c30.59,0.13 35.286,-12.685 66.079,-12.722c31.363,-0.039 42.503,19.317 65.694,20.888c44.685,3.027 65.462,-31.579 111.432,-26.911c40.539,4.116 58.801,26.413 77.497,29.285c28.978,4.452 48.444,-24.636 80.784,-25.12c48.512,-0.726 173.287,48.685 192.974,48.685"/>
</mask>
</defs>
<g>
<path class="erf" stroke="#5cda79" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="#9aecdb" d="M377.25 302.2 Q335.2 344.45 275.5 344.45 215.8 344.45 173.65 302.2 131.5 260.15 131.5 200.45 131.5 140.75 173.65 98.6 215.8 56.45 275.5 56.45 335.2 56.45 377.25 98.6 419.5 140.75 419.5 200.45 419.5 260.15 377.25 302.2"/>
<g mask="url(#erf-mask)">
<path class="countries" data-origin="0% 50%" stroke="#78e08f" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" d="M1191.45 160 L1187.35 160 M1188.95 172.8 L1170.5 172.8 M982.4 134.4 L972.1 134.4 M1013.45 121.6 L974.8 121.6 M1131.45 108.8 L1078.35 108.8 M1128.95 211.2 L1108.3 211.2 M1132.3 236.8 L1114.4 236.8 M1080.95 211.2 L1065.85 211.2 M1052 211.2 L1019.55 211.2 M1046.05 224 L1034.65 224 M1045.7 275.2 L1032.4 275.2 M1042.7 288 L1031.3 288 M1023.75 262.4 L973.7 262.4 M1023.75 275.2 L976.85 275.2 M1023.75 288 L982.6 288 M1006.4 313.6 L988.7 313.6 M1021.05 300.8 L983 300.8 M1094.6 198.4 L1042.4 198.4 M1159.7 224 L1153.75 224 M1151.05 236.8 L1141.05 236.8 M1157.2 249.6 L1146.2 249.6 M1198.15 275.2 L1147.35 275.2 M1203.1 288 L1148.35 288 M1186.7 262.4 L1160.7 262.4 M1188.8 249.6 L1167.35 249.6 M1203.55 300.8 L1178.45 300.8 M1229.55 300.8 L1214.4 300.8 M1204.1 134.4 L986.95 134.4 M1140.6 185.6 L1012.7 185.6 M1201.4 121.6 L1047.45 121.6 M1134.35 198.4 L1096.6 198.4 M1135 249.6 L1129.75 249.6 M1140.5 224 L1129.55 224 M885.6 134.4 L868.6 134.4 M836.6 108.8 L818.95 108.8 M838.65 134.4 L823.55 134.4 M848.65 121.6 L830.1 121.6 M953.35 147.2 L942.95 147.2 M913.6 134.4 L900.7 134.4 M939.85 147.2 L929.05 147.2 M906 108.8 L855.7 108.8 M903.3 96 L856.9 96 M897.6 121.6 L864.9 121.6 M779.65 96 L776.65 96 M715.1 134.4 L704.8 134.4 M666.65 160 L662.55 160 M798.4 108.8 L775.75 108.8 M801.35 134.4 L730.9 134.4 M809.1 121.6 L705.45 121.6 M791.55 198.4 L770 198.4 M704.8 300.8 L689.6 300.8 M678.75 300.8 L653.65 300.8 M824.65 326.4 L817.5 326.4 M825 313.6 L809.4 313.6 M825.15 300.8 L808.6 300.8 M867.85 249.6 L793.75 249.6 M847.45 224 L796.55 224 M858.15 262.4 L801.85 262.4 M866.3 236.8 L793.5 236.8 M845.6 275.2 L808.4 275.2 M832.8 288 L808.25 288 M813.65 211.2 L794.7 211.2 M841.25 160 L744.45 160 M828.3 172.8 L747.3 172.8 M814.35 185.6 L757.85 185.6 M852.8 147.2 L744 147.2 M811.45 96 L797.65 96 M1037.9 236.8 L940 236.8 M1164.35 172.8 L940.55 172.8 M1176.05 160 L953.75 160 M1176.5 147.2 L961.4 147.2 M1039.2 198.4 L944.2 198.4 M1015.95 211.2 L932.75 211.2 M1028.05 224 L932.9 224 M1034.65 249.6 L971.45 249.6 M615.85 185.6 L487.9 185.6 M606.7 108.8 L553.55 108.8 M378.5 96 L332.1 96 M388.85 134.4 L375.9 134.4 M360.8 134.4 L343.85 134.4 M381.2 108.8 L330.9 108.8 M372.85 121.6 L340.1 121.6 M457.65 134.4 L447.3 134.4 M428.55 147.2 L418.15 147.2 M415.05 147.2 L404.25 147.2 M481.6 313.6 L463.9 313.6 M634.9 224 L628.95 224 M626.25 236.8 L616.3 236.8 M604.2 211.2 L583.5 211.2 M632.4 249.6 L621.4 249.6 M607.5 236.8 L589.6 236.8 M609.55 198.4 L571.8 198.4 M610.2 249.6 L604.95 249.6 M615.7 224 L604.75 224 M556.2 211.2 L541.1 211.2 M521.25 224 L509.85 224 M517.9 288 L506.5 288 M520.9 275.2 L507.6 275.2 M527.2 211.2 L494.75 211.2 M569.8 198.4 L517.6 198.4 M639.55 172.8 L415.75 172.8 M509.85 249.6 L446.7 249.6 M496.3 300.8 L458.2 300.8 M498.95 288 L457.8 288 M498.95 275.2 L452.05 275.2 M498.95 262.4 L448.9 262.4 M513.1 236.8 L415.2 236.8 M503.25 224 L408.1 224 M491.15 211.2 L407.95 211.2 M514.4 198.4 L419.4 198.4 M488.65 121.6 L450 121.6 M254.9 96 L251.85 96 M286.7 96 L272.85 96 M190.3 134.4 L180 134.4 M323.85 121.6 L305.3 121.6 M313.9 134.4 L298.8 134.4 M311.85 108.8 L294.15 108.8 M273.65 108.8 L250.95 108.8 M284.3 121.6 L180.65 121.6 M303.5 172.8 L222.5 172.8 M316.45 160 L219.7 160 M276.55 134.4 L206.1 134.4 M289.55 185.6 L233.05 185.6 M266.8 198.4 L245.2 198.4 M320.8 275.2 L283.6 275.2 M308 288 L283.5 288 M322.65 224 L271.75 224 M288.85 211.2 L269.9 211.2 M299.85 326.4 L292.7 326.4 M300.4 300.8 L283.8 300.8 M300.2 313.6 L284.65 313.6 M328.05 147.2 L219.25 147.2 M341.55 236.8 L268.7 236.8 M333.35 262.4 L277.1 262.4 M343.05 249.6 L268.95 249.6 M679.3 134.4 L462.15 134.4 M676.65 121.6 L522.65 121.6 M651.75 147.2 L436.65 147.2 M651.3 160 L428.95 160 M678.3 288 L623.55 288 M673.35 275.2 L622.55 275.2 M664 249.6 L642.6 249.6 M661.9 262.4 L635.9 262.4 M664.15 172.8 L645.7 172.8"/>
</g>
<path fill="#333333" fill-opacity="0.05" d="M390.4 190.95 Q390.4 134.7 350.55 94.95 337 81.35 321.5 72.35 349 82.15 371.35 104.55 411.2 144.3 411.2 200.55 411.2 256.85 371.35 296.45 331.75 336.3 275.4 336.3 238.45 336.3 208.6 319.1 230.05 326.7 254.6 326.7 310.95 326.7 350.55 286.85 390.4 247.25 390.4 190.95"/>
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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