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.95.........完整代码请登录后点击上方下载按钮下载查看