svg+css打造山林间流星雨夜色日出效果代码
代码语言：html
所属分类：动画
代码描述：svg+css打造山林间流星雨夜色日出效果代码，美轮美奂的景色
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
/* Global Styles
---------------------------------------------- */
html {font-family: 'Open Sans', sans-serif; background: #0D133A; height:100%; font-size: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-smoothing: antialiased;overflow: hidden;position: relative;}
body {height:100%;overflow: hidden; margin: 0; font-size: 1em; line-height: 1.4; position: relative;}
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
a{color: white;text-decoration: none;}
/* Animation globals
---------------------------------------------- */
#landscape, .land, #bottom, .stags,.stag, .counter:before, #lensFlare, .sunMask{
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* Background gradients
---------------------------------------------- */
#sky{
height: 60%;
margin-bottom: -6px;
position: absolute;
top: 0px;
z-index: 2;
}
#sky-rect{height:100%;}
#reflection, #sunMask{
height: 40%;
position: absolute;
top: 60%;
z-index: 4;
}
#reflection-rect{height:100%;}
#sunMask{
background: #0D133A;
height: 40%;
position: absolute;
top: 60%;
width: 100%;
}
/* Stag
---------------------------------------------- */
#stag{
position: absolute;
bottom: 15.3%;
width: 6.3%;
left: 38%;
z-index: 5;
}
.stag{
width:100%;
position: absolute;
bottom: 0px;
}
.stags{
animation-name: stags;
animation-delay:1s;
}
@keyframes stags{
0% { fill:#0D141E;}
4% { fill:#101522;}
8% { fill:#121726;}
12% { fill:#141829;}
16% { fill:#1C1E3C;}
20% { fill:#22214F;}
24% { fill:#262262;}
28% { fill:#1D4065;}
32% { fill:#125768;}
36% { fill:#1E4553;}
40% { fill:#1E404E;}
44% { fill:#1E3B49;}
48% { fill:#1D3643;}
52% { fill:#1C313E;}
56% { fill:#1C3344;}
60% { fill:#1C3449;}
64% { fill:#1B344F;}
68% { fill:#183454;}
72% { fill:#242B4A;}
76% { fill:#2B2241;}
80% { fill:#24203C;}
84% { fill:#1D1D37;}
88% { fill:#151A32;}
92% { fill:#14192C;}
96% { fill:#111725;}
100% { fill:#0D141E;}
}
#stag1{
animation-name: stag_one;
width: 108%;
left: -20%;
}
@keyframes stag_one{
0% {opacity:1.0;}
15% {opacity:1.0;}
20% {opacity:0.0;}
90% {opacity:0.0;}
95% {opacity:1.0;}
100% {opacity:1.0;}
}
#stag2{
animation-name: stag_two;
}
@keyframes stag_two{
0% {opacity:0.0;}
17% {opacity:0.0;}
20% {opacity:1.0;}
40% {opacity:1.0;}
45% {opacity:0.0;}
65% {opacity:0.0;}
70% {opacity:1.0;}
90% {opacity:1.0;}
95% {opacity:0.0;}
100% {opacity:0.0;}
}
#stag3{
animation-name: stag_three;
width: 144%;
left: -10%;
bottom: -3%;
}
@keyframes stag_three{
0% {opacity:0.0;}
15% {opacity:0.0;}
20% {opacity:0.0;}
40% {opacity:0.0;}
45% {opacity:1.0;}
65% {opacity:1.0;}
70% {opacity:0.0;}
100% {opacity:0.0;}
}
/* Sun
---------------------------------------------- */
.sunMask{
position:absolute;
width:100%;
height:100%;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
z-index: 4;
mix-blend-mode: screen;
animation-name: sunFocus;
}
@keyframes sunFocus{
0% { filter: blur(10px);opacity:0;}
16% {filter: blur(10px);}
20% {filter: blur(10px);}
25% {filter: blur(5px);opacity:0;}
30% {filter: blur(0px);opacity:1;}
80% {filter: blur(0px);opacity:1;}
88% {filter: blur(5px);opacity:0;}
100% {filter: blur(10px);opacity:0;}
}
.sun{
width: 100%;
padding-bottom: 100%;
position:absolute;
right: -51%;
top: -330%;
}
.sun div{
background: transparent url(//repo.bfw.wiki/bfwrepo/svg/sun.svg);
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.suncrane{
animation: suncrane 60s linear infinite;
position:absolute;
width: 21%;
height: 4%;
background: transparent;
margin: auto;
top: 57%;
left: 0;
right: 0;
}
@keyframes suncrane{
0% {transform:rotate(90deg);}
100% {transform:rotate(-270deg);}
}
.sun:before{
display:block;
content:' ';
animation: glare 60s linear infinite;
position:absolute;
width: 120%;
height: 120%;
background: url(//repo.bfw.wiki/bfwrepo/svg/glare.svg) no-repeat scroll center;
top: -10%;
left: -10%;
background-size: 100%;
}
@keyframes glare{
from {transform:rotate(90deg);opacity:0.0;}
30%{opacity:0.0;}
36%{opacity:1.0;}
68%{opacity:1.0;}
74%{opacity:0.0;}
to {transform:rotate(450deg);opacity:0.0;}
}
.sun:after{display: block; content:' '; position:absolute;background: white;width: 10%;height: 10%;top: 45%;border-radius: 100%;margin: auto;left: 0;right: 0;box-shadow: 0px 0px 80px 30px white;}
/* Clouds
---------------------------------------------- */
.clouds{
position: absolute;
width: 100%;
z-index: 4; mix-blend-mode: screen;
height: 100%;
}
.clouds svg{
width: 60%;
position: absolute;
top: 51%;
filter: blur(2px);
opacity: 0.4;
left: -60%;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: clouds;
}
@keyframes clouds{
0% {transform: translate3d(110%, 0px, 0px);opacity: 0.0;}
19%{opacity: 0.0;filter: blur(5px);}
25%{opacity: 0.3;filter: blur(2px);}
50%{opacity: 0.6;}
75%{opacity: 0.2;}
90%{opacity: 0.0;}
100% {transform: translate3d(150%, 0px, 0px);opacity: 0.0}
}
/* Lens flare
---------------------------------------------- */
.lighting{
width: 100%;
height: 100%;
position: absolute;
z-index: 8;
opacity: 0.3;
-webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
mix-blend-mode: screen;
pointer-events: none;
filter: blur(3px);
}
.lighting .suncrane{
width: 100%;
}
#lensFlare{
transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
animation-name: flaring;
}
@keyframes flaring{
0% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0;}
28% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; }
35% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; }
70% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; }
78% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; }
100% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; }
}
/* Sun on lake twinkles
---------------------------------------------- */
.twinkleWrap{
position: absolute;
z-index: 4;
width:100%;
height:100%;
top:0;
opacity: 0.55;
}
.twinkles{
width: 2.3%;
position: absolute;
right: 49.2%;
top: 72.5%;
animation: twinkles 60s linear infinite;
}
@keyframes twinkles{
0% {transform: translate(450%, 0%);opacity:0.0;}
32%{opacity:0.0;}
34%{opacity:1.0;}
36.5% {transform: translate(450%, 0%);}
54% {transform: translate(0%, 0%);}
72% {transform: translate(-450%, 0%);opacity:1.0;}
78%{opacity:0.0;}
100% {transform: translate(-450%, 0%);opacity:0.0;}
}
.twinkles:before{
content:' ';
display: none;
position:absolute;
height: 600px;
width:3px;
background:red;
top: -600px;
left: 50%;
}
.twinkles svg{
width: 100%;
position: absolute;
top: 0;
}
#twinkle1{
animation: twinkle1 2s linear infinite;
}
@keyframes twinkle1{
0% {opacity:1.0;}
33.33% {opacity:0.0;}
66.66% {opacity:0.0;}
99.99% {opacity:1.0;}
100% {opacity:1.0;}
}
#twinkle2{ animation: twinkle2 2s linear infinite;
}
@keyframes twinkle2{
0% {opacity:0.0;}
33.33% {opacity:1.0;}
66.66% {opacity:0.0;}
99.99% {opacity:0.0;}
100% {opacity:0.0;}
}
#twinkle3{ animation: twinkle3 2s linear infinite;
}
@keyframes twinkle3{
0% {opacity:0.0;}
33.33% {opacity:0.0;}
66.66% {opacity:1.0;}
99.99% {opacity:0.0;}
100% {opacity:0.0;}
}
/* Vignette
---------------------------------------------- */
.vignette{
background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%);
background-size: cover;
height: 100%;
z-index: 9;
position: absolute;
width: 100%;
pointer-events: none;
}
/* Stars
---------------------------------------------- */
.stars{
height: 100%;
z-index: 2;
position: absolute;
width: 100%;
overflow: hidden;
}
.starWrap{
height: 60%;
width: 100%;
position:relative;
}
.starProject{
overflow: hidden;
}
.starReflect{
overflow: hidden;
height: 40%;
opacity: 0.9;
top: 1%;
}
#stars{
position: absolute;
width: 120%;
border-radius: 100%;
margin: auto;
left: -10%;
right: 0;
animation: stars 120s linear infinite;
transform: rotate(0deg);
top: -35%;
}
@keyframes stars{
100% {transform: rotate(-360deg);}
}
#starReflection{
position: absolute;
width: 120%;
border-radius: 100%;
margin: auto;
left: -10%;
right: 0;
animation: starsReflect 120s linear infinite;
transform: rotate(0deg);
top:initial;
bottom: -102%;
}
@keyframes starsReflect{
100% {transform: rotate(360deg);}
}
/* Sprites
----------------------------------------------- */
.spriteWrap{
height: 100%;
width: 100%;
position: absolute;
z-index: 13;
animation: sprites 60s linear infinite;
pointer-events: none;
}
@keyframes sprites{
0% {opacity:0.8;}
20% {opacity:0.8;}
25%{opacity:0.0;}
73% {opacity:0.0;}
90% {opacity:0.8;}
100% {opacity:0.8;}
}
#sprites{
height: 100%;
width: 100%;
}
/* Controls
---------------------------------------------- */
.controls{
position:absolute;
top:0px;
width 20%;
z-index: 10;
background: rgba(0, 0, 0, 0.16);
height: 100%;
width: 380px;
padding: 23px;
transform: translate3d(-250px, 0px, 0px);
-moz-transform: translate3d(-250px, 0px, 0px);
-o-transform: translate3d(-250px, 0px, 0px);
-ms-transform: translate3d(-250px, 0px, 0px);
transform: translate3d(-250px, 0px, 0px);
opacity: 0;
}
.controls, .controls *{
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;
}
.controls:hover{
transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
opacity: 1.0;
}
.controls ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.controls ul li{
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
color: white;
}
.controls ul li span.title{
display: inline-block;
padding: 10px 0px;
}
.controls ul li a{
display: block;
padding: 10px 0px;
}
.controls ul li a:hover{
padding-left: 10px;
}
.controls ul li a.active{}
.controls ul li a.active:after{content: 'on';float: right;}
.controls audio{
width: 100%;
opacity: 0.2;
position: relative;
width: 80%;
display: inline-block;
top: 8px;
float: right;
}
.controls audio:hover{opacity:1.0;}
.noise{
width:100%;
height:100%;
background:transparent;
opacity:0.03;
z-index: 9;
position: absolute;
top: 0;
pointer-events: none;
}
.noise.active{
background: transparent url(//repo.bfw.wiki/bfwrepo/icon/5fe566a638afc.gif);
opacity: 0.015;
background-size: 620px;
}
.counter{
color: rgba(255, 255, 255, 0.12);
position: absolute;
width: calc(100% - 46px);
bottom: 21px;
text-align:justify;
font-size: 0px;
}
.counter:before{
content: ':';
display:inline-block;
position: absolute;
animation-name: timer;
background: rgba(255, 255, 255, 0.03);
text-align: right;
left:0px;
bottom: 0px;
color: transparent;
border-right: 1px solid rgba(255, 255, 255, 0.13);
line-height: 34px;
}
@keyframes timer{
0% { width:0%; }
100% { width:100%; }
}
/* Landscape
---------------------------------------------- */
#landscape{
width: 100.02%;
position: absolute;
bottom: 11%;
z-index: 5;
animation-name: focus;
}
@keyframes focus{
0% { filter: blur(5px);}
16% {filter: blur(2px);}
20% {filter: blur(0px);}
80% {filter: blur(0px);}
88% {filter: blur(2px);}
100% {filter: blur(5px);}
}
#bottom{
animation-name: bottomFill;
height: 100%;
position: absolute;
top: 88%;
width: 100%;
z-index: 5;
animation-delay:1s;
}
@keyframes bottomFill{
0% { background:#0D141E; }
4% { background:#101522; }
8% { background:#121726; }
12% { background:#141829; }
16% { background:#1C1E3C; }
20% { background:#22214F; }
24% { background:#262262; }
28% { background:#1D4065; }
32% { background:#125768; }
36% { background:#1E4553; }
40% { background:#1E404E; }
44% { background:#1E3B49; }
48% { background:#1D3643; }
52% { background:#1C313E; }
56% { background:#1C3344; }
60% { background:#1C3449; }
64% { background:#1B344F; }
68% { background:#183454; }
72% { background:#242B4A; }
76% { background:#2B2241; }
80% { background:#24203C; }
84% { background:#1D1D37; }
88% { background:#151A32; }
92% { background:#14192C; }
96% { background:#111725; }
100% { background:#0D141E; }
}
/* Land - layer 1 animation */
#landscape .layer1 {
fill:#F1F2F2;
animation-name: layer1;
animation-delay:1s;
}
@keyframes layer1{
0% { fill:#244154; }
4% { fill:#344358; }
8% { fill:#42465D; }
12% { fill:#4F4761; }
16% { fill:#7E5773; }
20% { fill:#A3517F; }
24% { fill:#F3829F; }
28% { fill:#D4B2AF; }
32% { fill:#AEDABB; }
36% { fill:#A1D6D6; }
40% { fill:#9ED5DD; }
44% { fill:#9AD4E4; }
48% { fill:#97D3EA; }
52% { fill:#92D3F4; }
56% { fill:#95C8DA; }
60% { fill:#96BDC5; }
64% { fill:#96B3B2; }
68% { fill:#96AA9E; }
72% { fill:#AF866A; }
76% { fill:#C0633B; }
80% { fill:#9D5E51; }
84% { fill:#7B5960; }
88% { fill:#59546D; }
92% { fill:#484E64; }
96% { fill:#37475C; }
100% { fill:#244154; }
}
/* Land - layer 2 animation */
#landscape .layer2 {
fill:#E6E7E8;
animation-name: layer2;
animation-delay:1s;
}
@keyframes layer2{
0% { fill:#0F2B46; }
4% { fill:#1C2D4A; }
8% { fill:#272E4E; }
12% { fill:#302F52; }
16% { fill:#663966; }
20% { fill:#913776; }
24% { fill:#D94A93; }
28% { fill:#BB94AD; }
32% { fill:#76CCCE; }
36% { fill:#6BAEC9; }
40% { fill:#62A7CA; }
44% { fill:#59A0CB; }
48% { fill:#5099CC; }
52% { fill:#4692CF; }
56% { fill:#4D8FBD; }
60% { fill:#518CAF; }
64% { fill:#548AA1; }
68% { fill:#578793; }
72% { fill:#7E6768; }
76% { fill:#8F4244; }
80% { fill:#74404D; }
84% { fill:#593D55; }
88% { fill:#393B5D; }
92% { fill:#2C3655; }
96% { fill:#1F304E; }
100% { fill:#0F2B46; }
}
/* Land - layer 3 animation */
#landscape .layer3 {
fill:#D1D3D4;
animation-name: layer3;
animation-delay:1s;
}
@keyframes layer3{
0% { fill:#0F2944; }
4% { fill:#1B2B47; }
8% { fill:#252C4B; }
12% { fill:#2E2D4E; }
16% { fill:#5F3663; }
20% { fill:#863572; }
24% { fill:#C8458D; }
28% { fill:#A48BAB; }
32% { fill:#68BFC7; }
36% { fill:#54A4C8; }
40% { fill:#4F9EC8; }
44% { fill:#4B98C7; }
48% { fill:#4691C7; }
52% { fill:#408BC8; }
56% { fill:#4688B7; }
60% { fill:#4984A9; }
64% { fill:#4C819C; }
68% { fill:#4E7E8F; }
72% { fill:#776167; }
76% { fill:#893E45; }
80% { fill:#6F3C4C; }
84% { fill:#543A52; }
88% { fill:#353758; }
92% { fill:#2A3351; }
96% { fill:#1E2E4A; }
100% { fill:#0F2944; }
}
/* Land - layer 4 animation */
#landscape .layer4 {
fill:#BCBEC0;
animation-name: layer4;
animation-delay:1s;
}
@keyframes layer4{
0% { fill:#0F2841; }
4% { fill:#1A2945; }
8% { fill:#232A48; }
12% { fill:#2B2A4B; }
16% { fill:#59335F; }
20% { fill:#7C336D; }
24% { fill:#B84089; }
28% { fill:#9683A5; }
32% { fill:#57B5C1; }
36% { fill:#4798BD; }
40% { fill:#4391BC; }
44% { fill:#408BBB; }
48% { fill:#3D85BA; }
52% { fill:#397FBA; }
56% { fill:#3E7DAC; }
60% { fill:#407AA1; }
64% { fill:#427896; }
68% { fill:#44768B; }
72% { fill:#705B66; }
76% { fill:#823B46; }
80% { fill:#69394B; }
84% { fill:#503650; }
88% { fill:#323454; }
92% { fill:#27304D; }
96% { fill:#1C2C47; }
100% { fill:#0F2841; }
}
/* Land - layer 5 animation */
#landscape .layer5 {
fill:#A7A9AC;
animation-name: layer5;
animation-delay:1s;
}
@keyframes layer5{
0% { fill:#0E263F; }
4% { fill:#192742; }
8% { fill:#212745; }
12% { fill:#292848; }
16% { fill:#51305B; }
20% { fill:#6E3068; }
24% { fill:#A23B82; }
28% { fill:#84799F; }
32% { fill:#44AABC; }
36% { fill:#3A8DB3; }
40% { fill:#3887B1; }
44% { fill:#3680AF; }
48% { fill:#347AAD; }
52% { fill:#3273AB; }
56% { fill:#3672A1; }
60% { fill:#387198; }
64% { fill:#396F90; }
68% { fill:#3A6E87; }
72% { fill:#695565; }
76% { fill:#7C3747; }
80% { fill:#64354A; }
84% { fill:#4B334D; }
88% { fill:#2E314F; }
92% { fill:#252D4A; }
96% { fill:#1B2A44; }
100% { fill:#0E263F; }
}
/* Land - layer 6 animation */
#landscape .layer6 {
fill:#939598;
animation-name: layer6;
animation-delay:1s;
}
@keyframes layer6{
0% { fill:#0E243C; }
4% { fill:#18253F; }
8% { fill:#202542; }
12% { fill:#262544; }
16% { fill:#482C56; }
20% { fill:#612D63; }
24% { fill:#8D357C; }
28% { fill:#6F719B; }
32% { fill:#00A1BC; }
36% { fill:#2583A8; }
40% { fill:#287CA3; }
44% { fill:#2A759F; }
48% { fill:#2D6F9A; }
52% { fill:#2E6895; }
56% { fill:#2F6891; }
60% { fill:#30678D; }
64% { fill:#306788; }
68% { fill:#306683; }
72% { fill:#625064; }
76% { fill:#753347; }
80% { fill:#5E3249; }
84% { fill:#47304A; }
88% { fill:#2B2E4B; }
92% { fill:#222A46; }
96% { fill:#192741; }
100% { fill:#0E243C; }
}
/* Land - layer 7 animation */
#landscape .layer7 {
fill:#808285;
animation-name: layer7;
animation-delay:1s;
}
@keyframes layer7{
0% { fill:#102237; }
4% { fill:#18223A; }
8% { fill:#1E233D; }
12% { fill:#242340; }
16% { fill:#402952; }
20% { fill:#542A5E; }
24% { fill:#793177; }
28% { fill:#5F668F; }
32% { fill:#0A8FA7; }
36% { fill:#237595; }
40% { fill:#256F90; }
44% { fill:#27698C; }
48% { fill:#286387; }
52% { fill:#285D82; }
56% { fill:#285E82; }
60% { fill:#285F81; }
64% { fill:#275F81; }
68% { fill:#255F7F; }
72% { fill:#574A63; }
76% { fill:#683148; }
80% { fill:#542F48; }
84% { fill:#3F2D47; }
88% { fill:#242742; }
92% { fill:#202841; }
96% { fill:#19253C; }
100% { fill:#102237; }
}
/* Land - layer 8 animation */
#landscape .layer8 {
fill:#6D6E71;
animation-name: layer8;
animation-delay:1s;
}
@keyframes layer8{
0% { fill:#111F31; }
4% { fill:#172034; }
8% { fill:#1C2037; }
12% { fill:#20213B; }
16% { fill:#37274C; }
20% { fill:#472759; }
24% { fill:#662C71; }
28% { fill:#4F5C83; }
32% { fill:#118095; }
36% { fill:#206983; }
40% { fill:#21637E; }
44% { fill:#225D7A; }
48% { fill:#225775; }
52% { fill:#225270; }
56% { fill:#235372; }
60% { fill:#235574; }
64% { fill:#235675; }
68% { fill:#235676; }
72% { fill:#4C445F; }
76% { fill:#5B2F49; }
80% { fill:#4A2C47; }
84% { fill:#382A44; }
88% { fill:#242742; }
92% { fill:#1E253D; }
96% { fill:#182338; }
100% { fill:#111F31; }
}
/* Land - layer 9 animation */
#landscape .layer9 {
fill:#58595B;
animation-name: layer9;
animation-delay:1s;
}
@keyframes layer9{
0% { fill:#111C2B; }
4% { fill:#151D2E; }
8% { fill:#191E32; }
12% { fill:#1D1E35; }
16% { fill:#2F2447; }
20% { fill:#3A2454; }
24% { fill:#52296C; }
28% { fill:#405279; }
32% { fill:#137185; }
36% { fill:#1C5C72; }
40% { fill:#1C576E; }
44% { fill:#1C5269; }
48% { fill:#1B4C64; }
52% { fill:#1A475F; }
56% { fill:#1C4A63; }
60% { fill:#1E4B67; }
64% { fill:#1F4D6A; }
68% { fill:#204E6D; }
72% { fill:#413E5A; }
76% { fill:#4E2D49; }
80% { fill:#402A45; }
84% { fill:#312742; }
88% { fill:#20243E; }
92% { fill:#1B2238; }
96% { fill:#171F32; }
100% { fill:#111C2B; }
}
/* Land - layer 10 animation */
#landscape .layer10 {
fill:#414042;
animation-name: layer10;
animation-delay:1s;
}
@keyframes layer10{
0% { fill:#101825; }
4% { fill:#131928; }
8% { fill:#161A2C; }
12% { fill:#181B2F; }
16% { fill:#262141; }
20% { fill:#2C214F; }
24% { fill:#3D2567; }
28% { fill:#30486F; }
32% { fill:#136476; }
36% { fill:#165163; }
40% { fill:#154C5E; }
44% { fill:#144759; }
48% { fill:#134254; }
52% { fill:#113D4F; }
56% { fill:#154055; }
60% { fill:#19425A; }
64% { fill:#1B445F; }
68% { fill:#1E4564; }
72% { fill:#363856; }
76% { fill:#412A49; }
80% { fill:#352744; }
84% { fill:#29243F; }
88% { fill:#1C203A; }
92% { fill:#191F33; }
96% { fill:#151C2C; }
100% { fill:#101825; }
}
/* Land - layer 11 animation */
#landscape .layer11 {
fill:#232323;
animation-name: layer11;
animation-delay:1s;
}
@keyframes layer11{
0% { fill:#0D141E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
4% { fill:#101522; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);}
8% { fill:#121726; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
12% { fill:#141829; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);}
16% { fill:#1C1E3C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
20% { fill:#22214F; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);}
24% { fill:#262262; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
28% { fill:#1D4065; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);}
32% { fill:#125768; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
36% { fill:#1E4553; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);}
40% { fill:#1E404E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
44% { fill:#1E3B49; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);}
48% { fill:#1D3643; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
52% { fill:#1C313E; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);}
56% { fill:#1C3344; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
60% { fill:#1C3449; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);}
64% { fill:#1B344F; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
68% { fill:#183454; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);}
72% { fill:#242B4A; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
76% { fill:#2B2241; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);}
80% { fill:#24203C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);}
84% { fill:#1D1D37; }
88% { fill:#151A32; }
92% { fill:#14192C; }
96% { fill:#111725; }
100% { fill:#0D141E; }
}
/* Aspect ratio media queries
---------------------------------------------- */
/* 3/2 and 6/1 -- out of range*/
@media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1){
body{background: rgb(31, 60, 80);}
body:before{content:'放大窗口预览效果';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;}
#sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;}
}
/* 14/5 and 3/1 */
@media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2){
.twinkles{}
#reflection, #sunMask{height: 42%;}
#landscape{bottom: -3%;}
#bottom{top: 101%;}
#stag{bottom: 3%;}
.sun{top: -570%;}
.twinkles{top: 77%;}
}
/* 5/2 and 14/5 */
@media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5){
.twinkles{top: 75%;}
#reflection, #sunMask{}
#landscape{bottom: 1%;}
#bottom{top: 98%;}
#stag{bottom: 7%;}
.sun{top: -532%;}
}
/* 9/4 and 5/2 */
@media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2){
.twinkles{top: 75%;}
#reflection, #sunMask{height: 40%;}
#landscape{bottom: 5%;}
#bottom{top: 94%;}
#stag{bottom: 10%;}
.sun{top: -452%;}
}
/* 11/5 and 9/4 */
@media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4){
.twinkles{}
#reflection, #sunMask{}
#landscape{bottom: 6%;}
#bottom{top: 93%;}
#stag{
bottom: 11%;}
.sun{top: -410%;}
}
/* 13/6 and 11/5 */
@media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5){
.twinkles{}
#reflection, #sunMask{height: 37%;}
#landscape{bottom: 6%;}
#bottom{top: 93%;}
#stag{bottom: 11%;}
.sun{}
}
/* 15/7 and 13/6 */
@media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6){
.twinkles{}
#reflection, #sunMask{height: 31%;}
#landscape{bottom: 7%;}
#bottom{top: 92%;}
#stag{bottom: 12%;}
.sun{}
}
/* 2/1 and 15/7 */
@media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7){
.twinkles{}
#reflection, #sunMask{height: 31%;}
#landscape{bottom: 8%;}
#bottom{top: 91%;}
#stag{bottom: 12%;}
.sun{top: -370%;}
}
@media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1){
.twinkles{}
#reflection, #sunMask{height: 30%;}
#landscape{}
#bottom{}
#stag{bottom: 15%;}
.sun{}
}
/* 7/4 and 15/8 */
@media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8){
.twinkles{top: 71%;}
#reflection, #sunMask{height: 28%;}
#landscape{bottom: 13%;}
#bottom{top: 86%;}
#stag{bottom: 17%;}
.sun{top: -300%;}
}
/* 11/7 and 7/4 */
@media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4){
.twinkles{top: 69%;}
#reflection, #sunMask{height: 24%;}
#landscape{bottom: 16%;}
#bottom{top: 83%;}
#stag{bottom: 20%;}
.sun{top: -270%;}
}
/* 13/9 and 11/7 */
@media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7){
.twinkles{top: 68%;}
#reflection, #sunMask{height: 22%;}
#landscape{bottom: 18%;}
#bottom{top: 81%;}
#stag{bottom: 21.6%;}
.sun{top: -240%;}
}
/* 4/3 and 13/9 */
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9){
.twinkles{top: 66%;}
#reflection, #sunMask{height: 19%;}
#landscape{bottom: 22%;}
#bottom{top: 77%;}
#stag{bottom: 25%;}
.sun{top: -230%;}
}
/* 8/7 and 4/3 */
@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3){
.twinkles{top: 65%;}
#reflection, #sunMask{height: 18%;}
#landscape{bottom: 23%;}
#bottom{top: 76%;}
#stag{bottom: 25.3%;}
.sun{top: -180%;}
}
/* 14/15 and 8/7 */
@media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7){
.twinkles{top: 63%;width: 3%;}
#reflection, #sunMask{height: 17%;}
#landscape{bottom: 26%;}
#bottom{top: 73.8%;}
#stag{bottom: 28.3%;}
.sun{top: -140%;}
}
/* 5/6 and 14/15 */
@media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15){
.twinkles{top: 63%; width: 3%;}
#reflection, #sunMask{height: 13%;}
#landscape{bottom: 28%;}
#bottom{top: 71.5%;}
#stag{bottom: 30%;}
.sun{top: -110%;}
}
/* 7/10 and 5/6 */
@media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6){
.twinkles{top: 62%; width: 3%;}
#reflection, #sunMask{height: 11%;}
#landscape{bottom: 30%;}
#bottom{top: 69.6%;}
#stag{bottom: 31.8%;}
.sun{top: -70%;}
}
/* 5/9 and 7/10 */
@media screen and (min-aspect-ratio: 5/9) and (max-aspect-ratio: 7/10){
.twinkles{top: 62%; width: 3%;}
#reflection, #sunMask{height: 8%;}
#landscape{bottom: 32%;}
#bottom{top: 67.5%;}
#stag{bottom: 33.5%;}
.sun{top: -55%;}
}
/* 1/10 and 5/9 --- out of range*/
@media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9){
body{background: rgb(31, 60, 80);}
body:before{content:'放大窗口预览效果';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;}
#sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;}
}
</style>
</head>
<body >
<!-- Stars -->
<div class="stars">
<div class="starWrap starProject">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 599.456 593.71" enable-background="new 0 0 599.456 593.71" xml:space="preserve" id="stars">
<circle fill="#FFFFFF" cx="287.793" cy="0.398" r="0.398"/>
<circle fill="#FFFFFF" cx="300.965" cy="15.945" r="0.398"/>
<circle fill="#FFFFFF" cx="306.237" cy="22.961" r="0.398"/>
<circle fill="#FFFFFF" cx="282.496" cy="16.214" r="0.398"/>
<circle fill="#FFFFFF" cx="257.775" cy="32.352" r="0.398"/>
<circle fill="#FFFFFF" cx="287.624" cy="62.283" r="0.398"/>
<circle fill="#FFFFFF" cx="240.963" cy="68.985" r="0.398"/>
<circle fill="#FFFFFF" cx="183.157" cy="79.314" r="0.398"/>
<circle fill="#FFFFFF" cx="146.147" cy="75.118" r="0.398"/>
<circle fill="#FFFFFF" cx="104.511" cy="75.817" r="0.398"/>
<circle fill="#FFFFFF" cx="256.101" cy="75.548" r="0.398"/>
<circle fill="#FFFFFF" cx="238.941" cy="85.554" r="0.398"/>
<circle fill="#FFFFFF" cx="199.887" cy="82.994" r="0.398"/>
<circle fill="#FFFFFF" cx="176.917" cy="65.08" r="0.878"/>
<circle fill="#FFFFFF" cx="198.757" cy="44.455" r="0.398"/>
<circle fill="#FFFFFF" cx="133.344" cy="62.638" r="0.398"/>
<circle fill="#FFFFFF" cx="161.909" cy="57.85" r="0.398"/>
<circle fill="#FFFFFF" cx="157.283" cy="29.393" r="0.398"/>
<circle fill="#FFFFFF" cx="173.604" cy="58.872" r="0.398"/>
<circle fill="#FFFFFF" cx="251.83" cy="18.15" r="0.398"/>
<circle fill="#FFFFFF" cx="233.537" cy="26.273" r="0.398"/>
<circle fill="#FFFFFF" cx="264.063" cy="103.144" r="0.398"/>
<circle fill="#FFFFFF" cx="265.408" cy="108.308" r="0.398"/>
<circle fill="#FFFFFF" cx="269.012" cy="124.984" r="0.398"/>
<circle fill="#FFFFFF" cx="290.991" cy="154.549" r="0.398"/>
<circle fill="#FFFFFF" cx="255.079" cy="145.534" r="0.398"/>
<circle fill="#FFFFFF" cx="245.988" cy="116.754" r="0.398"/>
<circle fill="#FFFFFF" cx="231.55" cy="113.419" r="0.398"/>
<circle fill="#FFFFFF" cx="224.202" cy="123.209" r="0.398"/>
<circle fill="#FFFFFF" cx="229.581" cy="131.709" r="0.398"/>
<circle fill="#FFFFFF" cx="238.134" cy="141.607" r="0.398"/>
<circle fill="#FFFFFF" cx="230.872" cy="153.925" r="0.398"/>
<circle fill="#FFFFFF" cx="180.414" cy="170.709" r="0.398"/>
<circle fill="#FFFFFF" cx="256.317" cy="191.334" r="0.398"/>
<circle fill="#FFFFFF" cx="235.714" cy="193.948" r="0.398"/>
<circle fill="#FFFFFF" cx="224.094" cy="193.948" r="0.398"/>
<circle fill="#FFFFFF" cx="244.321" cy="208.795" r="0.398"/>
<circle fill="#FFFFFF" cx="266.936" cy="221.759" r="0.398"/>
<circle fill="#FFFFFF" cx="291.444" cy="227.999" r="0.398"/>
<circle fill="#FFFFFF" cx="259.652" cy="242.362" r="0.398"/>
<circle fill="#FFFFFF" cx="247.979" cy="240.103" r="0.398"/>
<circle fill="#FFFFFF" cx="239.802" cy="230.958" r="0.398"/>
<circle fill="#FFFFFF" cx="245.127" cy="225.009" r="0.398"/>
<circle fill="#FFFFFF" cx="233.669" cy="241.071" r="0.398"/>
<circle fill="#FFFFFF" cx="221.566" cy="236.983" r="0.398"/>
<circle fill="#FFFFFF" cx="189.881" cy="228.613" r="0.398"/>
<circle fill="#FFFFFF" cx="171.452" cy="204.922" r="0.398"/>
<circle fill="#FFFFFF" cx="199.403" cy="193.41" r="0.398"/>
<circle fill="#FFFFFF" cx="130.515" cy="219.123" r="0.398"/>
<circle fill="#FFFFFF" cx="112.849" cy="204.523" r="0.878"/>
<circle fill="#FFFFFF" cx="101.176" cy="199.865" r="0.398"/>
<circle fill="#FFFFFF" cx="105.372" cy="210.678" r="0.398"/>
<circle fill="#FFFFFF" cx="104.318" cy="220.522" r="0.398"/>
<circle fill="#FFFFFF" cx="74.656" cy="232.572" r="0.398"/>
<circle fill="#FFFFFF" cx="107.846" cy="235.638" r="0.398"/>
<circle fill="#FFFFFF" cx="84.338" cy="218.294" r="0.398"/>
<circle fill="#FFFFFF" cx="66.264" cy="214.551" r="0.398"/>
<circle fill="#FFFFFF" cx="10.964" cy="203.577" r="0.398"/>
<circle fill="#FFFFFF" cx="46.005" cy="194.593" r="0.398"/>
<circle fill="#FFFFFF" cx="40.389" cy="177.702" r="0.878"/>
<circle fill="#FFFFFF" cx="74.225" cy="144.296" r="0.398"/>
<circle fill="#FFFFFF" cx="125.19" cy="146.018" r="0.398"/>
<circle fill="#FFFFFF" cx="145.556" cy="159.896" r="0.398"/>
<circle fill="#FFFFFF" cx="183.857" cy="160.295" r="0.398"/>
<circle fill="#FFFFFF" cx="185.255" cy="181.844" r="0.398"/>
<circle fill="#FFFFFF" cx="117.475" cy="137.734" r="0.398"/>
<circle fill="#FFFFFF" cx="163.523" cy="116.862" r="0.398"/>
<circle fill="#FFFFFF" cx="164.814" cy="129.449" r="0.398"/>
<circle fill="#FFFFFF" cx="186.062" cy="113.871" r="0.398"/>
<circle fill="#FFFFFF" cx="202.093" cy="94.914" r="0.398"/>
<circle fill="#FFFFFF" cx="89.395" cy="106.587" r="0.398"/>
<circle fill="#FFFFFF" cx="89.686" cy="109.815" r="0.398"/>
<circle fill="#FFFFFF" cx="79.013" cy="106.587" r="0.398"/>
<circle fill="#FFFFFF" cx="56.742" cy="196.853" r="0.398"/>
<circle fill="#FFFFFF" cx="45.715" cy="147.201" r="0.398"/>
<circle fill="#FFFFFF" cx="75.022" cy="110.675" r="0.398"/>
<circle fill="#FFFFFF" cx="80.067" cy="116.862" r="0.398"/>
<circle fill="#FFFFFF" cx="112.203" cy="112.472" r="0.398"/>
<circle fill="#FFFFFF" cx="115.7" cy="254.197" r="0.398"/>
<circle fill="#FFFFFF" cx="96.227" cy="283.568" r="0.398"/>
<circle fill="#FFFFFF" cx="72.611" cy="282.492" r="0.398"/>
<circle fill="#FFFFFF" cx="50.986" cy="284.267" r="0.398"/>
<circle fill="#FFFFFF" cx="46.253" cy="288.947" r="0.398"/>
<circle fill="#FFFFFF" cx="21.723" cy="303.418" r="0.878"/>
<circle fill="#FFFFFF" cx="18.71" cy="333.488" r="0.398"/>
<circle fill="#FFFFFF" cx="54.913" cy="351.993" r="0.398"/>
<circle fill="#FFFFFF" cx="6.876" cy="342.902" r="0.398"/>
<circle fill="#FFFFFF" cx="12.632" cy="356.781" r="0.398"/>
<circle fill="#FFFFFF" cx="10.318" cy="339.513" r="0.398"/>
<circle fill="#FFFFFF" cx="0.398" cy="348.26" r="0.398"/>
<circle fill="#FFFFFF" cx="11.771" cy="323.989" r="0.398"/>
<circle fill="#FFFFFF" cx="31.965" cy="326.549" r="0.398"/>
<circle fill="#FFFFFF" cx="64.65" cy="303.095" r="0.398"/>
<circle fill="#FFFFFF" cx="64.22" cy="293.358" r="0.398"/>
<circle fill="#FFFFFF" cx="74.709" cy="293.358" r="0.398"/>
<circle fill="#FFFFFF" cx="84.199" cy="299.276" r="0.398"/>
<circle fill="#FFFFFF" cx="89.556" cy="303.418" r="0.398"/>
<circle fill="#FFFFFF" cx="106.286" cy="320.47" r="0.398"/>
<circle fill="#FFFFFF" cx="127.987" cy="303.019" r="0.398"/>
<circle fill="#FFFFFF" cx="128.611" cy="305.753" r="0.398"/>
<circle fill="#FFFFFF" cx="151.311" cy="297.285" r="0.398"/>
<circle fill="#FFFFFF" cx="179.445" cy="297.684" r="0.398"/>
<circle fill="#FFFFFF" cx="184.233" cy="299.814" r="0.398"/>
<circle fill="#FFFFFF" cx="203.384" cy="321.708" r="0.398"/>
<circle fill="#FFFFFF" cx="296.393" cy="309.335" r="0.398"/>
<circle fill="#FFFFFF" cx="260.997" cy="332.574" r="0.398"/>
<circle fill="#FFFFFF" cx="246.849" cy="331.014" r="0.398"/>
<circle fill="#FFFFFF" cx="269.604" cy="348.228" r="0.398"/>
<circle fill="#FFFFFF" cx="267.344" cy="352.8" r="0.398"/>
<circle fill="#FFFFFF" cx="253.842" cy="358.018" r="0.398"/>
<circle fill="#FFFFFF" cx="237.166" cy="350.057" r="0.398"/>
<circle fill="#FFFFFF" cx="230.496" cy="341.773" r="0.398"/>
<circle fill="#FFFFFF" cx="221.942" cy="343.655" r="0.398"/>
<circle fill="#FFFFFF" cx="219.898" cy="359.471" r="0.398"/>
<circle fill="#FFFFFF" cx="216.724" cy="361.246" r="0.398"/>
<circle fill="#FFFFFF" cx="221.996" cy="382.01" r="0.398"/>
<circle fill="#FFFFFF" cx="179.069" cy="354.791" r="0.398"/>
<circle fill="#FFFFFF" cx="182.189" cy="361.246" r="0.398"/>
<circle fill="#FFFFFF" cx="174.227" cy="359.525" r="0.398"/>
<circle fill="#FFFFFF" cx="166.589" cy="358.449" r="0.398"/>
<circle fill="#FFFFFF" cx="173.829" cy="364.043" r="0.398"/>
<circle fill="#FFFFFF" cx="146.309" cy="355.759" r="0.398"/>
<circle fill="#FFFFFF" cx="150.236" cy="371.305" r="0.398"/>
<circle fill="#FFFFFF" cx="141.951" cy="389.649" r="0.398"/>
<circle fill="#FFFFFF" cx="138.347" cy="406.11" r="0.398"/>
<circle fill="#FFFFFF" cx="156.669" cy="419.182" r="0.398"/>
<circle fill="#FFFFFF" cx="173.851" cy="411.543" r="0.398"/>
<circle fill="#FFFFFF" cx="175.25" cy="416.653" r="0.398"/>
<circle fill="#FFFFFF" cx="180.629" cy="417.675" r="0.398"/>
<circle fill="#FFFFFF" cx="166.589" cy="386.045" r="0.398"/>
<circle fill="#FFFFFF" cx="185.847" cy="379.751" r="0.398"/>
<circle fill="#FFFFFF" cx="187.299" cy="383.754" r="0.398"/>
<circle fill="#FFFFFF" cx="192.141" cy="380.719" r="0.398"/>
<circle fill="#FFFFFF" cx="190.85" cy="382.732" r="0.398"/>
<circle fill="#FFFFFF" cx="199.887" cy="390.047" r="0.398"/>
<circle fill="#FFFFFF" cx="213.152" cy="388.466" r="0.398"/>
<circle fill="#FFFFFF" cx="209.624" cy="400.515" r="0.398"/>
<circle fill="#FFFFFF" cx="220.544" cy="404.904" r="0.398"/>
<circle fill="#FFFFFF" cx="242.223" cy="416.761" r="0.398"/>
<circle fill="#FFFFFF" cx="242.223" cy="424.292" r="0.398"/>
<circle fill="#FFFFFF" cx="257.123" cy="435.051" r="0.398"/>
<circle fill="#FFFFFF" cx="272.939" cy="435.449" r="0.398"/>
<circle fill="#FFFFFF" cx="264.493" cy="458.612" r="0.398"/>
<circle fill="#FFFFFF" cx="257.554" cy="465.821" r="0.398"/>
<circle fill="#FFFFFF" cx="287.355" cy="470.07" r="0.398"/>
<circle fill="#FFFFFF" cx="269.711" cy="484.81" r="0.398"/>
<circle fill="#FFFFFF" cx="265.708" cy="499.334" r="0.398"/>
<circle fill=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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