<div id="root">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="layer layer-4"></div>
<div class="layer layer-5"></div>
<div class="layer layer-6"></div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
SCSS
格式化
// Gradients made with the GradientArt editor - https://gra.dient.art
$zinc-950: #09090b;
html, body {
width: 100%;
height: 100%;
background-color: $zinc-950;
display: flex;
align-items: center;
justify-content: center;
}
#root {
width: 100vmin;
height: 100vmin;
position: relative;
overflow: hidden;
}
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.layer-1 {
animation: 30s linear rotate infinite;
transform-origin: 66% 40%;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.46) 3.96%, rgba(69,168,255,0) 8.33%, rgba(69,168,255,0) 8.33%) 69.5% 37.7% / 17.2% 17.2% no-repeat, /* Rays */
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,1) 0%, rgba(69,168,255,0) 47.22%) 74.1% 35.6% / 33.6% 36.6% no-repeat; /* Rays */
}
.layer-2 {
animation: 20s linear rotate infinite reverse;
transform-origin: 66% 40%;
background:
radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 20%, $zinc-950 29%) 77.4% 33.8% / 40% 40% no-repeat, /* Mask */
repeating-conic-gradient(from 15deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.51) 2.64%, rgba(69,168,255,0) 5.56%, rgba(69,168,255,0) 5.56%) 69.5% 37.7% / 17.2% 17.2% no-repeat; /* Rays */
}
.layer-3 {
animation: 20s linear rotate infinite;
background:
repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 8.1%, rgba(69,168,255,0) 16.67%, rgba(69,168,255,0) 16.67%) 0 0 / 100% 100% no-repeat; /* Rays */
}
.layer-4 {
animation: 40s linear rotate infinite reverse;
background:
repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 2.86%, rgba(69,168,255,0) 5.88%, rgba(69,168,255,0) 5.88%) 0% 0% / 100% 100% no-repeat; /* Rays */
}
.layer-5 {
animation: 40s linear rotate infinite;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 6.62%, rgba(69,168,255,0) 7.69%, rgba(69,168,255,0) 7.69%) 0% 0% / 100% 100% no-repeat; /* Rays */
}
.layer-6 {
background:
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.27) 0%, rgba(69,168,255,0) 63.54%) 67% 39.3% / 5.8% 5.8% no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 40.28%, rgba(255,183,163,0.05) 52.43%, rgba(69,168,255,0) 63.54%) 68% 38.6% / 13% 13% no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.55) 0%, rgba(69,168,255,0) 63.54%) 66.9% 39.3% / 3.4% 3.4% no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.2) 0%, rgba(69,168,255,0) 66.67%) 70.7% 36.5% / 25.6% 25.6% no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, $zinc-950 26%, rgba(69,168,255,0) 26.4%) 0% 0% / 100% 100% no-repeat, /* Moon */
radial-gradient(ellipse at 50% 50%, rgba(255,212,148,0.04) 0%, rgba(69,168,255,0) 69.79%) 0% 0% / 100% 100% no-repeat, /* Glow */
radial-gradient(ellipse at 50% 50%, rgba(255,240,148,0.11) 0%, rgba(69,168,255,0) 52.43%) 0% 0% / 100% 100% no-repeat, /* Glow */
radial-gradient(ellipse at 51% 49%, rgba(69,168,255,0) 23.96%, $zinc-950 40.63%) 0% 0% / 100% 100% no-repeat, /* Mask */
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,239,69,0.14) 11.04%, rgba(69,168,255,0) 20%, rgba(69,168,255,0) 20%) 0% 0% / 100% 100% no-repeat, /* Rays */
radial-gradient(ellipse at 52% 48%, rgba(69,168,255,0) 23.96%, $zinc-950 34.03%) 0% 0% / 100% 100% no-repeat, /* Mask */
radial-gradient(ellipse at 50% 50%, rgba(255,185,147,0.29) 28%, rgba(69,168,255,0) 30%) 0% 0% / 100% 100% no-repeat; /* Glow */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
JS
格式化