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