css实现立体多彩空心圆环动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现立体多彩空心圆环动画效果代码，使用多个span结合css实现此起彼伏的动画效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	background:linear-gradient(-45deg,#f0a8de,#f0dda8);
	height:100vh;
	overflow:hidden;
}
div {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.left {
	clip-path:polygon(0% 0%,50% 0%,50% 100%,0% 100%);
}
.right {
	clip-path:polygon(50% 0%,100% 0%,100% 100%,50% 100%);
}
span {
	position:absolute;
	width:24vmin;
	height:24vmin;
	margin-top:-12vmin;
	margin-left:-12vmin;
	border-radius:50%;
	background:white;
	animation:bumpy 6s infinite;
	animation-timing-function:cubic-bezier(0.43,-0.22,1,1.03);
}
.left span:nth-child(1) {
	top:calc(-2.00925vmin + 50%);
	left:calc(31.93686vmin + 50%);
	background:#d9ac26;
	box-shadow:0 0 0 0.48vmin #fae39e inset;
	animation-delay:-0.06s;
}
.right span:nth-child(1) {
	top:calc(2.00934vmin + 50%);
	left:calc(-31.93685vmin + 50%);
	background:#d926ac;
	box-shadow:0 0 0 0.48vmin #fa9ee3 inset;
	animation-delay:-3.06s;
}
.left span:nth-child(2) {
	top:calc(-4.01062vmin + 50%);
	left:calc(31.74768vmin + 50%);
	background:#d9ab26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-0.12s;
}
.right span:nth-child(2) {
	top:calc(4.0107vmin + 50%);
	left:calc(-31.74767vmin + 50%);
	background:#d926ab;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-3.12s;
}
.left span:nth-child(3) {
	top:calc(-5.99616vmin + 50%);
	left:calc(31.4332vmin + 50%);
	background:#d9aa26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-0.18s;
}
.right span:nth-child(3) {
	top:calc(5.99624vmin + 50%);
	left:calc(-31.43319vmin + 50%);
	background:#d926aa;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-3.18s;
}
.left span:nth-child(4) {
	top:calc(-7.95803vmin + 50%);
	left:calc(30.99467vmin + 50%);
	background:#d9a826;
	box-shadow:0 0 0 0.48vmin #fae19e inset;
	animation-delay:-0.24s;
}
.right span:nth-child(4) {
	top:calc(7.95811vmin + 50%);
	left:calc(-30.99465vmin + 50%);
	background:#d926a8;
	box-shadow:0 0 0 0.48vmin #fa9ee1 inset;
	animation-delay:-3.24s;
}
.left span:nth-child(5) {
	top:calc(-9.8885vmin + 50%);
	left:calc(30.43382vmin + 50%);
	background:#d9a626;
	box-shadow:0 0 0 0.48vmin #fae09e inset;
	animation-delay:-0.3s;
}
.right span:nth-child(5) {
	top:calc(9.88858vmin + 50%);
	left:calc(-30.4338vmin + 50%);
	background:#d926a6;
	box-shadow:0 0 0 0.48vmin #fa9ee0 inset;
	animation-delay:-3.3s;
}
.left span:nth-child(6) {
	top:calc(-11.77994vmin + 50%);
	left:calc(29.75287vmin + 50%);
	background:#d9a326;
	box-shadow:0 0 0 0.48vmin #fade9e inset;
	animation-delay:-0.36s;
}
.right span:nth-child(6) {
	top:calc(11.78002vmin + 50%);
	left:calc(-29.75284vmin + 50%);
	background:#d926a3;
	box-shadow:0 0 0 0.48vmin #fa9ede inset;
	animation-delay:-3.36s;
}
.left span:nth-child(7) {
	top:calc(-13.62489vmin + 50%);
	left:calc(28.95449vmin + 50%);
	background:#d99f26;
	box-shadow:0 0 0 0.48vmin #fadc9e inset;
	animation-delay:-0.42s;
}
.right span:nth-child(7) {
	top:calc(13.62496vmin + 50%);
	left:calc(-28.95445vmin + 50%);
	background:#d9269f;
	box-shadow:0 0 0 0.48vmin #fa9edc inset;
	animation-delay:-3.42s;
}
.left span:nth-child(8) {
	top:calc(-15.41607vmin + 50%);
	left:calc(28.04184vmin + 50%);
	background:#d99c26;
	box-shadow:0 0 0 0.48vmin #fada9e inset;
	animation-delay:-0.48s;
}
.right span:nth-child(8) {
	top:calc(15.41614vmin + 50%);
	left:calc(-28.0418vmin + 50%);
	background:#d9269c;
	box-shadow:0 0 0 0.48vmin #fa9eda inset;
	animation-delay:-3.48s;
}
.left span:nth-child(9) {
	top:calc(-17.14641vmin + 50%);
	left:calc(27.01852vmin + 50%);
	background:#d99726;
	box-shadow:0 0 0 0.48vmin #fad89e inset;
	animation-delay:-0.54s;
}
.right span:nth-child(9) {
	top:calc(17.14648vmin + 50%);
	left:calc(-27.01848vmin + 50%);
	background:#d92697;
	box-shadow:0 0 0 0.48vmin #fa9ed8 inset;
	animation-delay:-3.54s;
}
.left span:nth-child(10) {
	top:calc(-18.80908vmin + 50%);
	left:calc(25.88858vmin + 50%);
	background:#d99326;
	box-shadow:0 0 0 0.48vmin #fad69e inset;
	animation-delay:-0.6s;
}
.right span:nth-child(10) {
	top:calc(18.80915vmin + 50%);
	left:calc(-25.88853vmin + 50%);
	background:#d92693;
	box-shadow:0 0 0 0.48vmin #fa9ed6 inset;
	animation-delay:-3.6s;
}
.left span:nth-child(11) {
	top:calc(-20.39752vmin + 50%);
	left:calc(24.65646vmin + 50%);
	background:#d98d26;
	box-shadow:0 0 0 0.48vmin #fad39e inset;
	animation-delay:-0.66s;
}
.right span:nth-child(11) {
	top:calc(20.39759vmin + 50%);
	left:calc(-24.65641vmin + 50%);
	background:#d9268d;
	box-shadow:0 0 0 0.48vmin #fa9ed3 inset;
	animation-delay:-3.66s;
}
.left span:nth-child(12) {
	top:calc(-21.90546vmin + 50%);
	left:calc(23.32704vmin + 50%);
	background:#d98826;
	box-shadow:0 0 0 0.48vmin #fad09e inset;
	animation-delay:-0.72s;
}
.right span:nth-child(12) {
	top:calc(21.90552vmin + 50%);
	left:calc(-23.32698vmin + 50%);
	background:#d92688;
	box-shadow:0 0 0 0.48vmin #fa9ed0 inset;
	animation-delay:-3.72s;
}
.left span:nth-child(13) {
	top:calc(-23.32695vmin + 50%);
	left:calc(21.90555vmin + 50%);
	background:#d98226;
	box-shadow:0 0 0 0.48vmin #facd9e inset;
	animation-delay:-0.78s;
}
.right span:nth-child(13) {
	top:calc(23.32701vmin + 50%);
	left:calc(-21.90549vmin + 50%);
	background:#d92682;
	box-shadow:0 0 0 0.48vmin #fa9ecd inset;
	animation-delay:-3.78s;
}
.left span:nth-child(14) {
	top:calc(-24.65638vmin + 50%);
	left:calc(20.39762vmin + 50%);
	background:#d97c26;
	box-shadow:0 0 0 0.48vmin #faca9e inset;
	animation-delay:-0.84s;
}
.right span:nth-child(14) {
	top:calc(24.65644vmin + 50%);
	left:calc(-20.39755vmin + 50%);
	background:#d9267c;
	box-shadow:0 0 0 0.48vmin #fa9eca inset;
	animation-delay:-3.84s;
}
.left span:nth-child(15) {
	top:calc(-25.8885vmin + 50%);
	left:calc(18.80918vmin + 50%);
	background:#d97526;
	box-shadow:0 0 0 0.48vmin #fac79e inset;
	animation-delay:-0.9s;
}
.right span:nth-child(15) {
	top:calc(25.88855vmin + 50%);
	left:calc(-18.80911vmin + 50%);
	background:#d92675;
	box-shadow:0 0 0 0.48vmin #fa9ec7 inset;
	animation-delay:-3.9s;
}
.left span:nth-child(16) {
	top:calc(-27.01846vmin + 50%);
	left:calc(17.14652vmin + 50%);
	background:#d96e26;
	box-shadow:0 0 0 0.48vmin #fac39e inset;
	animation-delay:-0.96s;
}
.right span:nth-child(16) {
	top:calc(27.0185vmin + 50%);
	left:calc(-17.14644vmin + 50%);
	background:#d9266e;
	box-shadow:0 0 0 0.48vmin #fa9ec3 inset;
	animation-delay:-3.96s;
}
.left span:nth-child(17) {
	top:calc(-28.04178vmin + 50%);
	left:calc(15.41618vmin + 50%);
	background:#d96726;
	box-shadow:0 0 0 0.48vmin #fabf9e inset;
	animation-delay:-1.02s;
}
.right span:nth-child(17) {
	top:calc(28.04182vmin + 50%);
	left:calc(-15.41611vmin + 50%);
	background:#d92667;
	box-shadow:0 0 0 0.48vmin #fa9ebf inset;
	animation-delay:-4.02s;
}
.left span:nth-child(18) {
	top:calc(-28.95443vmin + 50%);
	left:calc(13.625vmin + 50%);
	background:#d95f26;
	box-shadow:0 0 0 0.48vmin #fabb9e inset;
	animation-delay:-1.08s;
}
.right span:nth-child(18) {
	top:calc(28.95447vmin + 50%);
	left:calc(-13.62493vmin + 50%);
	background:#d9265f;
	box-shadow:0 0 0 0.48vmin #fa9ebb inset;
	animation-delay:-4.08s;
}
.left span:nth-child(19) {
	top:calc(-29.75282vmin + 50%);
	left:calc(11.78006vmin + 50%);
	background:#d95826;
	box-shadow:0 0 0 0.48vmin #fab79e inset;
	animation-delay:-1.14s;
}
.right span:nth-child(19) {
	top:calc(29.75285vmin + 50%);
	left:calc(-11.77998vmin + 50%);
	background:#d92658;
	box-shadow:0 0 0 0.48vmin #fa9eb7 inset;
	animation-delay:-4.14s;
}
.left span:nth-child(20) {
	top:calc(-30.43378vmin + 50%);
	left:calc(9.88862vmin + 50%);
	background:#d95026;
	box-shadow:0 0 0 0.48vmin #fab39e inset;
	animation-delay:-1.2s;
}
.right span:nth-child(20) {
	top:calc(30.43381vmin + 50%);
	left:calc(-9.88854vmin + 50%);
	background:#d92650;
	box-shadow:0 0 0 0.48vmin #fa9eb3 inset;
	animation-delay:-4.2s;
}
.left span:nth-child(21) {
	top:calc(-30.99464vmin + 50%);
	left:calc(7.95815vmin + 50%);
	background:#d94826;
	box-shadow:0 0 0 0.48vmin #faaf9e inset;
	animation-delay:-1.26s;
}
.right span:nth-child(21) {
	top:calc(30.99466vmin + 50%);
	left:calc(-7.95807vmin + 50%);
	background:#d92648;
	box-shadow:0 0 0 0.48vmin #fa9eaf inset;
	animation-delay:-4.26s;
}
.left span:nth-child(22) {
	top:calc(-31.43318vmin + 50%);
	left:calc(5.99628vmin + 50%);
	background:#d93f26;
	box-shadow:0 0 0 0.48vmin #faab9e inset;
	animation-delay:-1.32s;
}
.right span:nth-child(22) {
	top:calc(31.43319vmin + 50%);
	left:calc(-5.9962vmin + 50%);
	background:#d9263f;
	box-shadow:0 0 0 0.48vmin #fa9eab inset;
	animation-delay:-4.32s;
}
.left span:nth-child(23) {
	top:calc(-31.74766vmin + 50%);
	left:calc(4.01074vmin + 50%);
	background:#d93726;
	box-shadow:0 0 0 0.48vmin #faa79e inset;
	animation-delay:-1.38s;
}
.right span:nth-child(23) {
	top:calc(31.74767vmin + 50%);
	left:calc(-4.01066vmin + 50%);
	background:#d92637;
	box-shadow:0 0 0 0.48vmin #fa9ea7 inset;
	animation-delay:-4.38s;
}
.left span:nth-child(24) {
	top:calc(-31.93685vmin + 50%);
	left:calc(2.00938vmin + 50%);
	background:#d92f26;
	box-shadow:0 0 0 0.48vmin #faa29e inset;
	animation-delay:-1.44s;
}
.right span:nth-child(24) {
	top:calc(31.93686vmin + 50%);
	left:calc(-2.00929vmin + 50%);
	background:#d9262f;
	box-shadow:0 0 0 0.48vmin #fa9ea2 inset;
	animation-delay:-4.44s;
}
.left span:nth-child(25) {
	top:calc(-32vmin + 50%);
	left:calc(0.00008vmin + 50%);
	background:#d92626;
	box-shadow:0 0 0 0.48vmin #fa9e9e inset;
	animation-delay:-1.5s;
}
.right span:nth-child(25) {
	top:calc(32vmin + 50%);
	left:calc(0vmin + 50%);
	background:#d92626;
	box-shadow:0 0 0 0.48vmin #fa9e9e inset;
	animation-delay:-4.5s;
}
.left span:nth-child(26) {
	top:calc(-31.93686vmin + 50%);
	left:calc(-2.00921vmin + 50%);
	background:#d9262f;
	box-shadow:0 0 0 0.48vmin #fa9ea2 inset;
	animation-delay:-1.56s;
}
.right span:nth-child(26) {
	top:calc(31.93686vmin + 50%);
	left:calc(2.00929vmin + 50%);
	background:#d92f26;
	box-shadow:0 0 0 0.48vmin #faa29e inset;
	animation-delay:-4.56s;
}
.left span:nth-child(27) {
	top:calc(-31.74768vmin + 50%);
	left:calc(-4.01058vmin + 50%);
	background:#d92637;
	box-shadow:0 0 0 0.48vmin #fa9ea7 inset;
	animation-delay:-1.62s;
}
.right span:nth-child(27) {
	top:calc(31.74767vmin + 50%);
	left:calc(4.01066vmin + 50%);
	background:#d93726;
	box-shadow:0 0 0 0.48vmin #faa79e inset;
	animation-delay:-4.62s;
}
.left span:nth-child(28) {
	top:calc(-31.43321vmin + 50%);
	left:calc(-5.99611vmin + 50%);
	background:#d9263f;
	box-shadow:0 0 0 0.48vmin #fa9eab inset;
	animation-delay:-1.68s;
}
.right span:nth-child(28) {
	top:calc(31.43319vmin + 50%);
	left:calc(5.9962vmin + 50%);
	background:#d93f26;
	box-shadow:0 0 0 0.48vmin #faab9e inset;
	animation-delay:-4.68s;
}
.left span:nth-child(29) {
	top:calc(-30.99468vmin + 50%);
	left:calc(-7.95799vmin + 50%);
	background:#d92648;
	box-shadow:0 0 0 0.48vmin #fa9eaf inset;
	animation-delay:-1.74s;
}
.right span:nth-child(29) {
	top:calc(30.99466vmin + 50%);
	left:calc(7.95807vmin + 50%);
	background:#d94826;
	box-shadow:0 0 0 0.48vmin #faaf9e inset;
	animation-delay:-4.74s;
}
.left span:nth-child(30) {
	top:calc(-30.43384vmin + 50%);
	left:calc(-9.88845vmin + 50%);
	background:#d92650;
	box-shadow:0 0 0 0.48vmin #fa9eb3 inset;
	animation-delay:-1.8s;
}
.right span:nth-child(30) {
	top:calc(30.43381vmin + 50%);
	left:calc(9.88854vmin + 50%);
	background:#d95026;
	box-shadow:0 0 0 0.48vmin #fab39e inset;
	animation-delay:-4.8s;
}
.left span:nth-child(31) {
	top:calc(-29.75288vmin + 50%);
	left:calc(-11.7799vmin + 50%);
	background:#d92658;
	box-shadow:0 0 0 0.48vmin #fa9eb7 inset;
	animation-delay:-1.86s;
}
.right span:nth-child(31) {
	top:calc(29.75285vmin + 50%);
	left:calc(11.77998vmin + 50%);
	background:#d95826;
	box-shadow:0 0 0 0.48vmin #fab79e inset;
	animation-delay:-4.86s;
}
.left span:nth-child(32) {
	top:calc(-28.95451vmin + 50%);
	left:calc(-13.62485vmin + 50%);
	background:#d9265f;
	box-shadow:0 0 0 0.48vmin #fa9ebb inset;
	animation-delay:-1.92s;
}
.right span:nth-child(32) {
	top:calc(28.95447vmin + 50%);
	left:calc(13.62493vmin + 50%);
	background:#d95f26;
	box-shadow:0 0 0 0.48vmin #fabb9e inset;
	animation-delay:-4.92s;
}
.left span:nth-child(33) {
	top:calc(-28.04186vmin + 50%);
	left:calc(-15.41603vmin + 50%);
	background:#d92667;
	box-shadow:0 0 0 0.48vmin #fa9ebf inset;
	animation-delay:-1.98s;
}
.right span:nth-child(33) {
	top:calc(28.04182vmin + 50%);
	left:calc(15.41611vmin + 50%);
	background:#d96726;
	box-shadow:0 0 0 0.48vmin #fabf9e inset;
	animation-delay:-4.98s;
}
.left span:nth-child(34) {
	top:calc(-27.01855vmin + 50%);
	left:calc(-17.14637vmin + 50%);
	background:#d9266e;
	box-shadow:0 0 0 0.48vmin #fa9ec3 inset;
	animation-delay:-2.04s;
}
.right span:nth-child(34) {
	top:calc(27.0185vmin + 50%);
	left:calc(17.14644vmin + 50%);
	background:#d96e26;
	box-shadow:0 0 0 0.48vmin #fac39e inset;
	animation-delay:-5.04s;
}
.left span:nth-child(35) {
	top:calc(-25.8886vmin + 50%);
	left:calc(-18.80905vmin + 50%);
	background:#d92675;
	box-shadow:0 0 0 0.48vmin #fa9ec7 inset;
	animation-delay:-2.1s;
}
.right span:nth-child(35) {
	top:calc(25.88855vmin + 50%);
	left:calc(18.80911vmin + 50%);
	background:#d97526;
	box-shadow:0 0 0 0.48vmin #fac79e inset;
	animation-delay:-5.1s;
}
.left span:nth-child(36) {
	top:calc(-24.65649vmin + 50%);
	left:calc(-20.39749vmin + 50%);
	background:#d9267c;
	box-shadow:0 0 0 0.48vmin #fa9eca inset;
	animation-delay:-2.16s;
}
.right span:nth-child(36) {
	top:calc(24.65644vmin + 50%);
	left:calc(20.39755vmin + 50%);
	background:#d97c26;
	box-shadow:0 0 0 0.48vmin #faca9e inset;
	animation-delay:-5.16s;
}
.left span:nth-child(37) {
	top:calc(-23.32707vmin + 50%);
	left:calc(-21.90543vmin + 50%);
	background:#d92682;
	box-shadow:0 0 0 0.48vmin #fa9ecd inset;
	animation-delay:-2.22s;
}
.right span:nth-child(37) {
	top:calc(23.32701vmin + 50%);
	left:calc(21.90549vmin + 50%);
	background:#d98226;
	box-shadow:0 0 0 0.48vmin #facd9e inset;
	animation-delay:-5.22s;
}
.left span:nth-child(38) {
	top:calc(-21.90559vmin + 50%);
	left:calc(-23.32692vmin + 50%);
	background:#d92688;
	box-shadow:0 0 0 0.48vmin #fa9ed0 inset;
	animation-delay:-2.28s;
}
.right span:nth-child(38) {
	top:calc(21.90552vmin + 50%);
	left:calc(23.32698vmin + 50%);
	background:#d98826;
	box-shadow:0 0 0 0.48vmin #fad09e inset;
	animation-delay:-5.28s;
}
.left span:nth-child(39) {
	top:calc(-20.39765vmin + 50%);
	left:calc(-24.65635vmin + 50%);
	background:#d9268d;
	box-shadow:0 0 0 0.48vmin #fa9ed3 inset;
	animation-delay:-2.34s;
}
.right span:nth-child(39) {
	top:calc(20.39759vmin + 50%);
	left:calc(24.65641vmin + 50%);
	background:#d98d26;
	box-shadow:0 0 0 0.48vmin #fad39e inset;
	animation-delay:-5.34s;
}
.left span:nth-child(40) {
	top:calc(-18.80922vmin + 50%);
	left:calc(-25.88848vmin + 50%);
	background:#d92693;
	box-shadow:0 0 0 0.48vmin #fa9ed6 inset;
	animation-delay:-2.4s;
}
.right span:nth-child(40) {
	top:calc(18.80915vmin + 50%);
	left:calc(25.88853vmin + 50%);
	background:#d99326;
	box-shadow:0 0 0 0.48vmin #fad69e inset;
	animation-delay:-5.4s;
}
.left span:nth-child(41) {
	top:calc(-17.14655vmin + 50%);
	left:calc(-27.01843vmin + 50%);
	background:#d92697;
	box-shadow:0 0 0 0.48vmin #fa9ed8 inset;
	animation-delay:-2.46s;
}
.right span:nth-child(41) {
	top:calc(17.14648vmin + 50%);
	left:calc(27.01848vmin + 50%);
	background:#d99726;
	box-shadow:0 0 0 0.48vmin #fad89e inset;
	animation-delay:-5.46s;
}
.left span:nth-child(42) {
	top:calc(-15.41622vmin + 50%);
	left:calc(-28.04176vmin + 50%);
	background:#d9269c;
	box-shadow:0 0 0 0.48vmin #fa9eda inset;
	animation-delay:-2.52s;
}
.right span:nth-child(42) {
	top:calc(15.41614vmin + 50%);
	left:calc(28.0418vmin + 50%);
	background:#d99c26;
	box-shadow:0 0 0 0.48vmin #fada9e inset;
	animation-delay:-5.52s;
}
.left span:nth-child(43) {
	top:calc(-13.62504vmin + 50%);
	left:calc(-28.95442vmin + 50%);
	background:#d9269f;
	box-shadow:0 0 0 0.48vmin #fa9edc inset;
	animation-delay:-2.58s;
}
.right span:nth-child(43) {
	top:calc(13.62496vmin + 50%);
	left:calc(28.95445vmin + 50%);
	background:#d99f26;
	box-shadow:0 0 0 0.48vmin #fadc9e inset;
	animation-delay:-5.58s;
}
.left span:nth-child(44) {
	top:calc(-11.78009vmin + 50%);
	left:calc(-29.7528vmin + 50%);
	background:#d926a3;
	box-shadow:0 0 0 0.48vmin #fa9ede inset;
	animation-delay:-2.64s;
}
.right span:nth-child(44) {
	top:calc(11.78002vmin + 50%);
	left:calc(29.75284vmin + 50%);
	background:#d9a326;
	box-shadow:0 0 0 0.48vmin #fade9e inset;
	animation-delay:-5.64s;
}
.left span:nth-child(45) {
	top:calc(-9.88866vmin + 50%);
	left:calc(-30.43377vmin + 50%);
	background:#d926a6;
	box-shadow:0 0 0 0.48vmin #fa9ee0 inset;
	animation-delay:-2.7s;
}
.right span:nth-child(45) {
	top:calc(9.88858vmin + 50%);
	left:calc(30.4338vmin + 50%);
	background:#d9a626;
	box-shadow:0 0 0 0.48vmin #fae09e inset;
	animation-delay:-5.7s;
}
.left span:nth-child(46) {
	top:calc(-7.95819vmin + 50%);
	left:calc(-30.99463vmin + 50%);
	background:#d926a8;
	box-shadow:0 0 0 0.48vmin #fa9ee1 inset;
	animation-delay:-2.76s;
}
.right span:nth-child(46) {
	top:calc(7.95811vmin + 50%);
	left:calc(30.99465vmin + 50%);
	background:#d9a826;
	box-shadow:0 0 0 0.48vmin #fae19e inset;
	animation-delay:-5.76s;
}
.left span:nth-child(47) {
	top:calc(-5.99632vmin + 50%);
	left:calc(-31.43317vmin + 50%);
	background:#d926aa;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-2.82s;
}
.right span:nth-child(47) {
	top:calc(5.99624vmin + 50%);
	left:calc(31.43319vmin + 50%);
	background:#d9aa26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-5.82s;
}
.left span:nth-child(48) {
	top:calc(-4.01079vmin + 50%);
	left:calc(-31.74765vmin + 50%);
	background:#d926ab;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-2.88s;
}
.right span:nth-child(48) {
	top:calc(4.0107vmin + 50%);
	left:calc(31.74767vmin + 50%);
	background:#d9ab26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-5.88s;
}
.left span:nth-child(49) {
	top:calc(-2.00942vmin + 50%);
	left:calc(-31.93685vmin + 50%);
	background:#d926ac;
	box-shadow:0 0 0 0.48vmin #fa9ee3 inset;
	animation-delay:-2.94s;
}
.right span:nth-child(49) {
	top:calc(2.00934vmin + 50%);
	left:calc(31.93685vmin + 50%);
	background:#d9ac26;
	box-shadow:0 0 0 0.48vmin #fae39e inset;
	animation-delay:-5.94s;
}
.left span:nth-child(50) {
	top:calc(-0.00013vmin + 50%);
	left:calc(-32vmin + 50%);
	background:#d926ac;
	box-shadow:0 0 0 0.48vmin #fa9ee3 inset;
	animation-delay:-3s;
}
.right span:nth-child(50) {
	top:calc(0.00004vmin + 50%);
	left:calc(32vmin + 50%);
	background:#d9ac26;
	box-shadow:0 0 0 0.48vmin #fae39e inset;
	animation-delay:-6s;
}
.left span:nth-child(51) {
	top:calc(2.00917vmin + 50%);
	left:calc(-31.93686vmin + 50%);
	background:#d926ac;
	box-shadow:0 0 0 0.48vmin #fa9ee3 inset;
	animation-delay:-3.06s;
}
.right span:nth-child(51) {
	top:calc(-2.00925vmin + 50%);
	left:calc(31.93686vmin + 50%);
	background:#d9ac26;
	box-shadow:0 0 0 0.48vmin #fae39e inset;
	animation-delay:-6.06s;
}
.left span:nth-child(52) {
	top:calc(4.01053vmin + 50%);
	left:calc(-31.74769vmin + 50%);
	background:#d926ab;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-3.12s;
}
.right span:nth-child(52) {
	top:calc(-4.01062vmin + 50%);
	left:calc(31.74768vmin + 50%);
	background:#d9ab26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-6.12s;
}
.left span:nth-child(53) {
	top:calc(5.99607vmin + 50%);
	left:calc(-31.43322vmin + 50%);
	background:#d926aa;
	box-shadow:0 0 0 0.48vmin #fa9ee2 inset;
	animation-delay:-3.18s;
}
.right span:nth-child(53) {
	top:calc(-5.99616vmin + 50%);
	left:calc(31.4332vmin + 50%);
	background:#d9aa26;
	box-shadow:0 0 0 0.48vmin #fae29e inset;
	animation-delay:-6.18s;
}
.left span:nth-child(54) {
	top:calc(7.95795vmin + 50%);
	left:calc(-30.99469vmin + 50%);
	background:#d926a8;
	box-shadow:0 0 0 0.48vmin #fa9ee1 inset;
	animation-delay:-3.24s;
}
.right span:nth-child(54) {
	top:calc(-7.95803vmin + 50%);
	left:calc(30.99467vmin + 50%);
	background:#d9a826;
	box-shadow:0 0 0 0.48vmin #fae19e inset;
	animation-delay:-6.24s;
}
.left span:nth-child(55) {
	top:calc(9.88841vmin + 50%);
	left:calc(-30.43385vmin + 50%);
	background:#d926a6;
	box-shadow:0 0 0 0.48vmin #fa9ee0 inset;
	animation-delay:-3.3s;
}
.right span:nth-child(55) {
	top:calc(-9.8885vmin + 50%);
	left:calc(30.43382vmin + 50%);
	background:#d9a626;
	box-shadow:0 0 0 0.48vmin #fae09e inset;
	animation-delay:-6.3s;
}
.left span:nth-child(56) {
	top:calc(11.77986vmin + 50%);
	left:calc(-29.7529vmin + 50%);
	background:#d926a3;
	box-shadow:0 0 0 0.48vmin #fa9ede inset;
	animation-delay:-3.36s;
}
.right span:nth-child(56) {
	top:calc(-11.77994vmin + 50%);
	left:calc(29.75287vmin + 50%);
	background:#d9a326;
	box-shadow:0 0 0 0.48vmin #fade9e inset;
	animation-delay:-6.36s;
}
.left span:nth-child(57) {
	top:calc(13.62481vmin + 50%);
	left:calc(-28.95452vmin + 50%);
	background:#d9269f;
	box-shadow:0 0 0 0.48vmin #fa9edc inset;
	animation-delay:-3.42s;
}
.r.........完整代码请登录后点击上方下载按钮下载查看