css+div实现圆环旋转产生彩色粒子碎片动画效果代码
代码语言：html
所属分类：粒子
代码描述：css+div实现圆环旋转产生彩色粒子碎片动画效果代码
代码标签： css div 圆环 旋转 彩色 粒子 碎片 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@property --ring-reveal {
inherits: true;
initial-value: 0%;
syntax: '<percentage>';
}
:root {
--size: 35vmin;
--ring-thickness: calc(var(--size) * 0.2);
--red: #ff4d00;
--green: #38b24d;
--yellow: #ebb624;
--blue: #0f73ff;
--base-speed: 1;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: hsl(32 61% 94%);
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Google Sans', sans-serif, system-ui;
padding: 10vmin;
}
main {
width: 100%;
display: grid;
place-items: center;
}
h1 {
color: hsl(32 64% 66%);
position: fixed;
margin: 0;
font-family: 'Google Sans', sans-serif, system-ui;
bottom: 1rem;
right: 1rem;
}
section {
width: var(--size);
aspect-ratio: 1;
position: relative;
-webkit-animation: scale-in calc(var(--base-speed) * 4s) both;
animation: scale-in calc(var(--base-speed) * 4s) both;
}
@-webkit-keyframes scale-in {
0% {
transform: scale(0);
}
}
@keyframes scale-in {
0% {
transform: scale(0);
}
}
.sling-ring {
height: 100%;
aspect-ratio: 1;
position: relative;
}
.sling-ring__ring {
--base-rotation: -120deg;
--starting-point: calc(360 * -0.125deg);
--ring-reveal: 0%;
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
transform: rotate(0deg);
border-color: var(--red) var(--green) var(--yellow) var(--blue);
mask: conic-gradient(from var(--starting-point), #000 var(--ring-reveal), transparent var(--ring-reveal));
-webkit-mask: conic-gradient(from var(--starting-point), #000 var(--ring-reveal), transparent var(--ring-reveal));
-webkit-animation: reveal calc(var(--base-speed) * 1s) both ease-in, rotate 10s infinite linear;
animation: reveal calc(var(--base-speed) * 1s) both ease-in, rotate 10s infinite linear;
z-index: 2;
}
img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-animation: fade-in calc(var(--base-speed) * 1s) calc(var(--base-speed) * 0.25s) ease-in both;
animation: fade-in calc(var(--base-speed) * 1s) calc(var(--base-speed) * 0.25s) ease-in both;
}
.sling-ring__ring--particles {
border: none;
-webkit-mask: none;
}
.sling-ring__particle-pen {
aspect-ratio: 1;
position: absolute;
inset: calc(var(--ring-thickness) * -1);
transform-origin: center;
transform: rotate(calc(((360 / var(--particle-count)) * var(--index)) * 1deg));
}
.sling-ring__particle-start {
position: absolute;
height: calc(var(--ring-thickness) * 1);
aspect-ratio: 1;
top: 0;
left: 50%;
transform: translate(-50%, 50%) rotate(-90deg);
background: rgba(255,0,0,0.2);
}
.sling-ring__particle {
height: calc(var(--size, 100) * 1%);
aspect-ratio: 1;
background: hsl(var(--hue, 280), 100%, calc(var(--lightness, 50) * 1%));
position: absolute;
top: calc(var(--x, 50) * 1%);
left: calc(var(--y, 50) * 1%);
-webkit-animation: blast 0.85s infinite both ease-out, fade-away 0.85s infinite both;
animation: blast 0.85s infinite both ease-out, fade-away 0.85s infinite both;
-webkit-animation-delay: calc((var(--base-delay, 0) + var(--delay, 0)) * 1s);
animation-delay: calc((var(--base-delay, 0) + var(--delay, 0)) * 1s);
}
.sling-ring--particles-real .sling-ring__particle {
border-radius: calc(var(--radius, 50) * 1%);
}
.sling-ring--particles-real .sling-ring__particle-start {
background: none;
}
.sling-ring--particles-real img {
-webkit-animation-delay: calc((var(--particle-count) / 5) * 0.75s);
animation-delay: calc((var(--particle-count) / 5) * 0.75s);
}
@-webkit-keyframes reveal {
to {
--ring-reveal: 100%;
}
}
@keyframes reveal {
to {
--ring-reveal: 100%;
}
}
@-webkit-keyframes rotate-in {
from {
transform: rotate(var(--base-rotation, 0deg));
}
}
@keyframes rotate-in {
from {
transform: rotate(var(--base-rotation, 0deg));
}
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes blast {
from {
transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(0) translate(0, 0);
}
to {
transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(1.2) translate(0, calc((var(--ring-thickness) * var(--distance, 5)) * -1));
}
}
@keyframes blast {
from {
transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(0) translate(0, 0);
}
to {
transform: rotate(calc(var(--rotation, 0) * 1deg)) scale(1.2) translate(0, calc((var(--ring-thickness) * var(--distance, 5)) * -1));
}
}
@-webkit-keyframes fade-away {
0%, 75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-away {
0%, 75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body >
<main>
<h1>Tap to replay</h1>
<section>
<div class="sling-ring sling-ring--particles sling-ring--particles-real" style="--particle-count: 14">
<div class="sling-ring__ring sling-ring__ring--particles">
<div class="sling-ring__particle-pen" style="--index: 0; --base-delay: 0;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 24; --hue: undefined; --lightness: 23; --size: 26; --distance: 3; --x: 21; --y: 86; --delay: 0.25; --rotation: -3;"></div>
<div class="sling-ring__particle" style="--radius: 30; --hue: undefined; --lightness: 73; --size: 37; --distance: 4; --x: 41; --y: 43; --delay: 0.47; --rotation: -22;"></div>
<div class="sling-ring__particle" style="--radius: 21; --hue: undefined; --lightness: 37; --size: 53; --distance: 5; --x: 87; --y: 41; --delay: 0.38; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 35; --hue: undefined; --lightness: 75; --size: 19; --distance: 5; --x: 19; --y: 63; --delay: 0.7; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 25; --size: 23; --distance: 4; --x: 16; --y: 41; --delay: 0.39; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: undefined; --lightness: 87; --size: 54; --distance: 6; --x: 2; --y: 78; --delay: 0.19; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 49; --hue: undefined; --lightness: 53; --size: 13; --distance: 5; --x: 3; --y: 52; --delay: 0.64; --rotation: -27;"></div>
<div class="sling-ring__particle" style="--radius: 34; --hue: undefined; --lightness: 84; --size: 80; --distance: 6; --x: 47; --y: 56; --delay: 0.54; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 24; --hue: undefined; --lightness: 23; --size: 44; --distance: 4; --x: 38; --y: 100; --delay: 0.66; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: undefined; --lightness: 57; --size: 58; --distance: 4; --x: 79; --y: 75; --delay: 0.94; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: undefined; --lightness: 69; --size: 18; --distance: 6; --x: 24; --y: 84; --delay: 0.5; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: undefined; --lightness: 43; --size: 75; --distance: 5; --x: 71; --y: 51; --delay: 0.4; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 46; --hue: undefined; --lightness: 72; --size: 43; --distance: 4; --x: 29; --y: 99; --delay: 0.37; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 82; --size: 31; --distance: 6; --x: 43; --y: 95; --delay: 0.49; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 43; --hue: undefined; --lightness: 61; --size: 43; --distance: 5; --x: 90; --y: 88; --delay: 0.26; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 28; --hue: undefined; --lightness: 85; --size: 31; --distance: 6; --x: 43; --y: 97; --delay: 0.64; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 20; --size: 80; --distance: 5; --x: 9; --y: 21; --delay: 0.26; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 37; --hue: undefined; --lightness: 37; --size: 66; --distance: 5; --x: 1; --y: 63; --delay: 0.03; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 69; --size: 68; --distance: 4; --x: 96; --y: 52; --delay: 0.91; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: undefined; --lightness: 56; --size: 27; --distance: 7; --x: 41; --y: 94; --delay: 0.68; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 35; --hue: undefined; --lightness: 65; --size: 38; --distance: 5; --x: 70; --y: 50; --delay: 0.82; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 34; --hue: undefined; --lightness: 21; --size: 33; --distance: 3; --x: 0; --y: 85; --delay: 0.52; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 67; --size: 69; --distance: 4; --x: 100; --y: 88; --delay: 0.54; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 44; --hue: undefined; --lightness: 63; --size: 33; --distance: 7; --x: 52; --y: 70; --delay: 0.53; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: undefined; --lightness: 20; --size: 41; --distance: 3; --x: 39; --y: 87; --delay: 0.77; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 29; --hue: undefined; --lightness: 69; --size: 22; --distance: 3; --x: 87; --y: 38; --delay: 0.71; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: undefined; --lightness: 27; --size: 77; --distance: 3; --x: 69; --y: 16; --delay: 0.66; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: undefined; --lightness: 22; --size: 80; --distance: 6; --x: 6; --y: 53; --delay: 0.5; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 15; --hue: undefined; --lightness: 47; --size: 47; --distance: 3; --x: 1; --y: 75; --delay: 0.38; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 19; --hue: undefined; --lightness: 65; --size: 71; --distance: 5; --x: 18; --y: 12; --delay: 0.39; --rotation: -1;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 1; --base-delay: 0.2;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 37; --hue: 18; --lightness: 24; --size: 27; --distance: 4; --x: 100; --y: 4; --delay: 0.02; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 33; --size: 35; --distance: 4; --x: 13; --y: 53; --delay: 0.49; --rotation: -17;"></div>
<div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 37; --size: 53; --distance: 6; --x: 57; --y: 5; --delay: 0.33; --rotation: -17;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 43; --size: 65; --distance: 3; --x: 13; --y: 61; --delay: 0.14; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 64; --size: 47; --distance: 7; --x: 38; --y: 98; --delay: 0.98; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 80; --size: 25; --distance: 6; --x: 30; --y: 15; --delay: 0.2; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 31; --size: 49; --distance: 4; --x: 35; --y: 52; --delay: 0.73; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 63; --size: 55; --distance: 5; --x: 10; --y: 58; --delay: 0.53; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 20; --size: 67; --distance: 6; --x: 71; --y: 2; --delay: 0.16; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 41; --hue: 18; --lightness: 70; --size: 50; --distance: 6; --x: 96; --y: 89; --delay: 0.16; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 69; --size: 20; --distance: 6; --x: 22; --y: 82; --delay: 0.76; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 32; --size: 16; --distance: 7; --x: 85; --y: 7; --delay: 0.08; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 72; --size: 43; --distance: 3; --x: 37; --y: 37; --delay: 0.83; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 36; --size: 64; --distance: 4; --x: 33; --y: 66; --delay: 0.94; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 82; --size: 26; --distance: 4; --x: 94; --y: 59; --delay: 0.75; --rotation: -17;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 31; --size: 44; --distance: 3; --x: 48; --y: 66; --delay: 0.82; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 35; --size: 78; --distance: 5; --x: 58; --y: 93; --delay: 0.59; --rotation: -12;"></div>
<div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 66; --size: 59; --distance: 3; --x: 79; --y: 49; --delay: 0.58; --rotation: -22;"></div>
<div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 88; --size: 68; --distance: 7; --x: 13; --y: 58; --delay: 0.39; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 60; --size: 18; --distance: 4; --x: 36; --y: 95; --delay: 0.77; --rotation: -15;"></div>
<div class="sling-ring__particle" style="--radius: 28; --hue: 18; --lightness: 50; --size: 65; --distance: 6; --x: 53; --y: 91; --delay: 0.51; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 9; --hue: 18; --lightness: 67; --size: 52; --distance: 3; --x: 34; --y: 84; --delay: 1; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 26; --size: 70; --distance: 3; --x: 15; --y: 93; --delay: 0.81; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 18; --lightness: 70; --size: 66; --distance: 5; --x: 86; --y: 25; --delay: 0.13; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 72; --size: 48; --distance: 3; --x: 14; --y: 41; --delay: 0.28; --rotation: -22;"></div>
<div class="sling-ring__particle" style="--radius: 32; --hue: 18; --lightness: 88; --size: 50; --distance: 3; --x: 15; --y: 29; --delay: 0.34; --rotation: -12;"></div>
<div class="sling-ring__particle" style="--radius: 21; --hue: 18; --lightness: 37; --size: 45; --distance: 3; --x: 18; --y: 59; --delay: 0.73; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 39; --hue: 18; --lightness: 70; --size: 79; --distance: 6; --x: 20; --y: 47; --delay: 0.39; --rotation: -7;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 69; --size: 11; --distance: 3; --x: 23; --y: 17; --delay: 0.14; --rotation: -27;"></div>
<div class="sling-ring__particle" style="--radius: 33; --hue: 18; --lightness: 41; --size: 71; --distance: 5; --x: 41; --y: 21; --delay: 0.41; --rotation: -4;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 2; --base-delay: 0.4;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 8; --hue: 18; --lightness: 85; --size: 64; --distance: 7; --x: 84; --y: 35; --delay: 0.61; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: 18; --lightness: 77; --size: 32; --distance: 4; --x: 4; --y: 64; --delay: 0.01; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 51; --size: 66; --distance: 6; --x: 15; --y: 91; --delay: 0.64; --rotation: -22;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 56; --size: 15; --distance: 4; --x: 93; --y: 24; --delay: 0.27; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 20; --hue: 18; --lightness: 48; --size: 72; --distance: 7; --x: 23; --y: 83; --delay: 0.06; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 64; --size: 15; --distance: 7; --x: 13; --y: 87; --delay: 0.35; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 22; --hue: 18; --lightness: 70; --size: 22; --distance: 6; --x: 87; --y: 11; --delay: 0.24; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 41; --size: 54; --distance: 7; --x: 37; --y: 91; --delay: 0.89; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 82; --size: 28; --distance: 7; --x: 85; --y: 56; --delay: 0.29; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 33; --size: 32; --distance: 3; --x: 46; --y: 88; --delay: 0.76; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 59; --size: 44; --distance: 6; --x: 67; --y: 70; --delay: 0.8; --rotation: -15;"></div>
<div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 28; --size: 58; --distance: 4; --x: 45; --y: 23; --delay: 0.55; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 46; --hue: 18; --lightness: 59; --size: 73; --distance: 7; --x: 84; --y: 54; --delay: 0.51; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 4; --hue: 18; --lightness: 69; --size: 38; --distance: 3; --x: 48; --y: 0; --delay: 0.44; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 18; --lightness: 42; --size: 32; --distance: 3; --x: 45; --y: 1; --delay: 0.87; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 56; --size: 27; --distance: 6; --x: 74; --y: 56; --delay: 0.75; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 18; --lightness: 63; --size: 55; --distance: 5; --x: 73; --y: 67; --delay: 0.68; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 33; --hue: 18; --lightness: 55; --size: 50; --distance: 7; --x: 89; --y: 77; --delay: 0.49; --rotation: -27;"></div>
<div class="sling-ring__particle" style="--radius: 13; --hue: 18; --lightness: 78; --size: 14; --distance: 3; --x: 60; --y: 8; --delay: 0.79; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: 18; --lightness: 71; --size: 25; --distance: 6; --x: 84; --y: 88; --delay: 0.06; --rotation: -18;"></div>
<div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 73; --size: 26; --distance: 6; --x: 50; --y: 99; --delay: 0.19; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 50; --hue: 18; --lightness: 78; --size: 64; --distance: 4; --x: 65; --y: 15; --delay: 0.58; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 4; --hue: 18; --lightness: 32; --size: 17; --distance: 7; --x: 97; --y: 40; --delay: 0.55; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 56; --size: 66; --distance: 4; --x: 21; --y: 85; --delay: 0.03; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 32; --hue: 18; --lightness: 87; --size: 56; --distance: 5; --x: 82; --y: 2; --delay: 0.27; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 49; --size: 76; --distance: 3; --x: 33; --y: 57; --delay: 0.94; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 0; --hue: 18; --lightness: 21; --size: 64; --distance: 3; --x: 9; --y: 99; --delay: 0.52; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 35; --hue: 18; --lightness: 89; --size: 45; --distance: 7; --x: 15; --y: 45; --delay: 0.19; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 18; --lightness: 26; --size: 11; --distance: 5; --x: 100; --y: 12; --delay: 0.55; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 18; --lightness: 45; --size: 40; --distance: 4; --x: 26; --y: 80; --delay: 0.06; --rotation: -9;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 3; --base-delay: 0.6;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 50; --hue: 18; --lightness: 85; --size: 29; --distance: 3; --x: 90; --y: 52; --delay: 0.64; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 15; --hue: 18; --lightness: 20; --size: 34; --distance: 5; --x: 22; --y: 94; --delay: 0.65; --rotation: -17;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 59; --size: 29; --distance: 4; --x: 19; --y: 39; --delay: 0.6; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 20; --hue: 18; --lightness: 47; --size: 75; --distance: 4; --x: 96; --y: 65; --delay: 0.02; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 25; --hue: 18; --lightness: 73; --size: 55; --distance: 3; --x: 23; --y: 58; --delay: 0.61; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 23; --size: 13; --distance: 7; --x: 93; --y: 0; --delay: 0.35; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 23; --size: 37; --distance: 5; --x: 29; --y: 5; --delay: 0.59; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 31; --hue: 18; --lightness: 53; --size: 27; --distance: 3; --x: 74; --y: 38; --delay: 0.14; --rotation: -3;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 28; --size: 56; --distance: 7; --x: 36; --y: 59; --delay: 0.92; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 46; --hue: 18; --lightness: 74; --size: 14; --distance: 6; --x: 7; --y: 31; --delay: 0.99; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 1; --hue: 18; --lightness: 89; --size: 70; --distance: 7; --x: 78; --y: 69; --delay: 0.29; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 18; --lightness: 53; --size: 25; --distance: 3; --x: 62; --y: 32; --delay: 0.51; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 16; --hue: 18; --lightness: 33; --size: 46; --distance: 5; --x: 76; --y: 43; --delay: 0.04; --rotation: -15;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 87; --size: 16; --distance: 5; --x: 15; --y: 62; --delay: 0.65; --rotation: -15;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: 18; --lightness: 71; --size: 51; --distance: 3; --x: 83; --y: 70; --delay: 0.82; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 18; --lightness: 54; --size: 22; --distance: 3; --x: 39; --y: 79; --delay: 0.37; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: 18; --lightness: 28; --size: 22; --distance: 7; --x: 23; --y: 85; --delay: 0.06; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 23; --hue: 18; --lightness: 73; --size: 64; --distance: 4; --x: 46; --y: 33; --delay: 0.49; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 19; --hue: 18; --lightness: 54; --size: 27; --distance: 7; --x: 66; --y: 76; --delay: 0.97; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 18; --lightness: 28; --size: 40; --distance: 5; --x: 12; --y: 87; --delay: 0.4; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 15; --hue: 18; --lightness: 69; --size: 68; --distance: 7; --x: 33; --y: 31; --delay: 0.74; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 22; --hue: 18; --lightness: 73; --size: 50; --distance: 5; --x: 97; --y: 76; --delay: 0.42; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 47; --hue: 18; --lightness: 33; --size: 46; --distance: 6; --x: 40; --y: 70; --delay: 0.83; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 12; --hue: 18; --lightness: 88; --size: 14; --distance: 4; --x: 86; --y: 66; --delay: 0.91; --rotation: -7;"></div>
<div class="sling-ring__particle" style="--radius: 34; --hue: 18; --lightness: 88; --size: 60; --distance: 7; --x: 84; --y: 59; --delay: 0.16; --rotation: -14;"></div>
<div class="sling-ring__particle" style="--radius: 13; --hue: 18; --lightness: 81; --size: 48; --distance: 7; --x: 53; --y: 42; --delay: 0; --rotation: -12;"></div>
<div class="sling-ring__particle" style="--radius: 44; --hue: 18; --lightness: 86; --size: 64; --distance: 3; --x: 62; --y: 83; --delay: 0.47; --rotation: -29;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 18; --lightness: 22; --size: 78; --distance: 3; --x: 35; --y: 78; --delay: 0.34; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 9; --hue: 18; --lightness: 21; --size: 50; --distance: 4; --x: 38; --y: 57; --delay: 0.93; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 24; --hue: 18; --lightness: 68; --size: 11; --distance: 3; --x: 36; --y: 95; --delay: 0.34; --rotation: -7;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 4; --base-delay: 0.8;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 10; --hue: 130; --lightness: 75; --size: 70; --distance: 6; --x: 64; --y: 8; --delay: 0.97; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 50; --hue: 130; --lightness: 49; --size: 72; --distance: 5; --x: 97; --y: 18; --delay: 0.2; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 49; --hue: 130; --lightness: 69; --size: 38; --distance: 5; --x: 18; --y: 46; --delay: 0.86; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 34; --hue: 130; --lightness: 39; --size: 33; --distance: 4; --x: 41; --y: 92; --delay: 0.1; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 36; --hue: 130; --lightness: 21; --size: 11; --distance: 3; --x: 32; --y: 29; --delay: 0.23; --rotation: -14;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 130; --lightness: 61; --size: 50; --distance: 5; --x: 92; --y: 15; --delay: 0.84; --rotation: -14;"></div>
<div class="sling-ring__particle" style="--radius: 8; --hue: 130; --lightness: 27; --size: 28; --distance: 6; --x: 96; --y: 78; --delay: 0.99; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 130; --lightness: 46; --size: 52; --distance: 7; --x: 64; --y: 89; --delay: 0.04; --rotation: -3;"></div>
<div class="sling-ring__particle" style="--radius: 37; --hue: 130; --lightness: 89; --size: 79; --distance: 3; --x: 24; --y: 82; --delay: 0.08; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 40; --hue: 130; --lightness: 28; --size: 24; --distance: 6; --x: 40; --y: 49; --delay: 0.58; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 0; --hue: 130; --lightness: 38; --size: 73; --distance: 7; --x: 94; --y: 82; --delay: 0.31; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 16; --hue: 130; --lightness: 80; --size: 80; --distance: 5; --x: 26; --y: 84; --delay: 0.47; --rotation: -11;"></div>
<div class="sling-ring__particle" style="--radius: 30; --hue: 130; --lightness: 87; --size: 75; --distance: 5; --x: 25; --y: 28; --delay: 0.34; --rotation: -18;"></div>
<div class="sling-ring__particle" style="--radius: 40; --hue: 130; --lightness: 85; --size: 69; --distance: 7; --x: 14; --y: 15; --delay: 0.17; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 130; --lightness: 44; --size: 18; --distance: 3; --x: 44; --y: 72; --delay: 0.25; --rotation: -18;"></div>
<div class="sling-ring__particle" style="--radius: 22; --hue: 130; --lightness: 51; --size: 24; --distance: 3; --x: 88; --y: 76; --delay: 0.84; --rotation: 0;"></div>
<div class="sling-ring__particle" style="--radius: 20; --hue: 130; --lightness: 80; --size: 39; --distance: 5; --x: 82; --y: 40; --delay: 0.79; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 37; --hue: 130; --lightness: 84; --size: 63; --distance: 3; --x: 92; --y: 8; --delay: 0.94; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 9; --hue: 130; --lightness: 84; --size: 42; --distance: 4; --x: 47; --y: 13; --delay: 0.3; --rotation: -5;"></div>
<div class="sling-ring__particle" style="--radius: 35; --hue: 130; --lightness: 77; --size: 56; --distance: 3; --x: 30; --y: 94; --delay: 0.57; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 15; --hue: 130; --lightness: 50; --size: 25; --distance: 3; --x: 52; --y: 8; --delay: 0.33; --rotation: -25;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 130; --lightness: 86; --size: 16; --distance: 7; --x: 56; --y: 0; --delay: 0.32; --rotation: -29;"></div>
<div class="sling-ring__particle" style="--radius: 14; --hue: 130; --lightness: 21; --size: 32; --distance: 4; --x: 72; --y: 11; --delay: 0.09; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 8; --hue: 130; --lightness: 56; --size: 38; --distance: 5; --x: 57; --y: 39; --delay: 0.51; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 130; --lightness: 48; --size: 80; --distance: 7; --x: 66; --y: 24; --delay: 0.55; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 37; --hue: 130; --lightness: 77; --size: 14; --distance: 7; --x: 60; --y: 44; --delay: 0.96; --rotation: -1;"></div>
<div class="sling-ring__particle" style="--radius: 11; --hue: 130; --lightness: 81; --size: 48; --distance: 4; --x: 0; --y: 42; --delay: 0.28; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 6; --hue: 130; --lightness: 85; --size: 24; --distance: 6; --x: 21; --y: 34; --delay: 0.34; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 47; --hue: 130; --lightness: 28; --size: 11; --distance: 5; --x: 56; --y: 92; --delay: 0.92; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 26; --hue: 130; --lightness: 83; --size: 62; --distance: 7; --x: 58; --y: 50; --delay: 0.48; --rotation: -30;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 5; --base-delay: 1;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 46; --hue: 130; --lightness: 75; --size: 68; --distance: 3; --x: 84; --y: 75; --delay: 0.58; --rotation: -13;"></div>
<div class="sling-ring__particle" style="--radius: 38; --hue: 130; --lightness: 78; --size: 65; --distance: 5; --x: 81; --y: 92; --delay: 0.05; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 130; --lightness: 46; --size: 37; --distance: 6; --x: 37; --y: 46; --delay: 0.27; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 31; --hue: 130; --lightness: 65; --size: 43; --distance: 3; --x: 36; --y: 67; --delay: 0.55; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 42; --hue: 130; --lightness: 76; --size: 73; --distance: 5; --x: 67; --y: 41; --delay: 0.55; --rotation: -27;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: 130; --lightness: 39; --size: 76; --distance: 7; --x: 51; --y: 85; --delay: 0.49; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 14; --hue: 130; --lightness: 50; --size: 30; --distance: 5; --x: 72; --y: 33; --delay: 0.58; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 30; --hue: 130; --lightness: 39; --size: 23; --distance: 6; --x: 64; --y: 67; --delay: 0.6; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 130; --lightness: 80; --size: 46; --distance: 6; --x: 64; --y: 86; --delay: 0.84; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 44; --hue: 130; --lightness: 84; --size: 66; --distance: 6; --x: 22; --y: 84; --delay: 0.47; --rotation: -7;"></div>
<div class="sling-ring__particle" style="--radius: 9; --hue: 130; --lightness: 85; --size: 27; --distance: 6; --x: 99; --y: 12; --delay: 0.99; --rotation: -6;"></div>
<div class="sling-ring__particle" style="--radius: 8; --hue: 130; --lightness: 46; --size: 23; --distance: 4; --x: 52; --y: 16; --delay: 0.9; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 46; --hue: 130; --lightness: 42; --size: 16; --distance: 5; --x: 60; --y: 95; --delay: 0.8; --rotation: -12;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 130; --lightness: 54; --size: 64; --distance: 7; --x: 45; --y: 54; --delay: 0.78; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 35; --hue: 130; --lightness: 81; --size: 65; --distance: 3; --x: 49; --y: 57; --delay: 0.67; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 0; --hue: 130; --lightness: 63; --size: 69; --distance: 5; --x: 80; --y: 59; --delay: 0.74; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 46; --hue: 130; --lightness: 37; --size: 53; --distance: 4; --x: 83; --y: 72; --delay: 0.06; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 10; --hue: 130; --lightness: 87; --size: 72; --distance: 7; --x: 90; --y: 81; --delay: 0.57; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 130; --lightness: 89; --size: 26; --distance: 5; --x: 69; --y: 60; --delay: 0.94; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 43; --hue: 130; --lightness: 82; --size: 22; --distance: 6; --x: 89; --y: 30; --delay: 0.83; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 31; --hue: 130; --lightness: 48; --size: 70; --distance: 4; --x: 32; --y: 83; --delay: 0.93; --rotation: -18;"></div>
<div class="sling-ring__particle" style="--radius: 16; --hue: 130; --lightness: 22; --size: 14; --distance: 5; --x: 73; --y: 74; --delay: 0.46; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 22; --hue: 130; --lightness: 21; --size: 40; --distance: 4; --x: 50; --y: 65; --delay: 0.25; --rotation: -1;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 130; --lightness: 31; --size: 73; --distance: 7; --x: 98; --y: 42; --delay: 0.15; --rotation: -8;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 130; --lightness: 78; --size: 21; --distance: 6; --x: 65; --y: 69; --delay: 0.25; --rotation: -26;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 130; --lightness: 31; --size: 10; --distance: 6; --x: 74; --y: 10; --delay: 0.92; --rotation: -3;"></div>
<div class="sling-ring__particle" style="--radius: 22; --hue: 130; --lightness: 63; --size: 52; --distance: 3; --x: 45; --y: 33; --delay: 0.75; --rotation: -14;"></div>
<div class="sling-ring__particle" style="--radius: 32; --hue: 130; --lightness: 31; --size: 62; --distance: 5; --x: 47; --y: 52; --delay: 0.61; --rotation: -14;"></div>
<div class="sling-ring__particle" style="--radius: 3; --hue: 130; --lightness: 41; --size: 10; --distance: 6; --x: 52; --y: 14; --delay: 0.81; --rotation: -28;"></div>
<div class="sling-ring__particle" style="--radius: 5; --hue: 130; --lightness: 25; --size: 39; --distance: 4; --x: 95; --y: 62; --delay: 0.61; --rotation: -17;"></div>
</div>
</div>
<div class="sling-ring__particle-pen" style="--index: 6; --base-delay: 1.2;">
<div class="sling-ring__particle-start">
<div class="sling-ring__particle" style="--radius: 5; --hue: 130; --lightness: 55; --size: 59; --distance: 4; --x: 26; --y: 31; --delay: 0.92; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 29; --hue: 130; --lightness: 37; --size: 22; --distance: 5; --x: 14; --y: 64; --delay: 0.48; --rotation: -19;"></div>
<div class="sling-ring__particle" style="--radius: 40; --hue: 130; --lightness: 39; --size: 64; --distance: 5; --x: 41; --y: 22; --delay: 0.48; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 130; --lightness: 21; --size: 10; --distance: 7; --x: 72; --y: 46; --delay: 0.13; --rotation: -30;"></div>
<div class="sling-ring__particle" style="--radius: 40; --hue: 130; --lightness: 90; --size: 47; --distance: 4; --x: 21; --y: 67; --delay: 0.16; --rotation: -9;"></div>
<div class="sling-ring__particle" style="--radius: 21; --hue: 130; --lightness: 25; --size: 52; --distance: 4; --x: 58; --y: 23; --delay: 0.55; --rotation: -17;"></div>
<div class="sling-ring__particle" style="--radius: 17; --hue: 130; --lightness: 43; --size: 43; --distance: 4; --x: 9; --y: 24; --delay: 0.11; --rotation: -21;"></div>
<div class="sling-ring__particle" style="--radius: 41; --hue: 130; --lightness: 80; --size: 55; --distance: 7; --x: 11; --y: 21; --delay: 0.31; --rotation: -16;"></div>
<div class="sling-ring__particle" style="--radius: 43; --hue: 130; --lightness: 48; --size: 44; --distance: 4; --x: 35; --y: 34; --delay: 0.96; --rotation: -4;"></div>
<div class="sling-ring__particle" style="--radius: 50; --hue: 130; --lightness: 39; --size: 34; --distance: 3; --x: 65; --y: 88; --delay: 0.43; --rotation: -29;"></div>
<div class="sling-ring__particle" style="--radius: 48; --hue: 130; --lightness: 72; --size: 77; --distance: 7; --x: 50; --y: 15; --delay: 0.99; --rotation: -23;"></div>
<div class="sling-ring__particle" style="--radius: 27; --hue: 130; --lightness: 37; --size: 68; --distance: 6; --x: 38; --y: 27; --delay: 0.27; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 30; --hue: 130; --lightness: 25; --size: 46; --distance: 6; --x: 5; --y: 87; --delay: 0.01; --rotation: -20;"></div>
<div class="sling-ring__particle" style="--radius: 2; --hue: 130; --lightness: 37; --size: 54; --distance: 5; --x: 85; --y: 32; --delay: 0.56; --rotation: -24;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 130; --lightness: 76; --size: 60; --distance: 6; --x: 39; --y: 38; --delay: 0.99; --rotation: -10;"></div>
<div class="sling-ring__particle" style="--radius: 45; --hue: 130; --lightness: 35; --size: 45; --distance: 5; --x: 59; --y: 37; --delay: 0.45; --rotation: -1;"></div>
<div class="sling-ring__particle" style="--radius: 6; --hue: 130; --lightness: 48; --size: 74; --distance: 3; --x: 8; --y: 29; --delay: 0.63; --rotation: -2;"></div>
<div class="sling-ring__particle" style="--radius: 4; --hue: 13.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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