css实现彩虹圈圈无限运动循环动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现彩虹圈圈无限运动循环动画效果代码，可拖动滑竿改变速度。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* This works best in chrome.Pretty damn pleased I got this working on my own. It took forever.Even though the joining part in the middle isn't quite perfect.Edited to include the loop going behind in the middle.*/:root {
	--colour1:#ef5350;
	--colour2:#ffb74d;
	--colour3:#fff176;
	--colour4:#80deea;
	--colour1a:#ffcdd2;
	--colour2a:#ffe0b2;
	--colour3a:#fff9c4;
	--colour4a:#e0f7fa;
	--speed:4.5s;
	/* 6 */  /* 2-1   4-2  8-3 */
}
body {
	font-family:verdana;
	font-size:12px;
	color:grey;
	background-color:#f5f5f5;
}
.world {
	position:absolute;
	margin:auto;
	top:0px;
	bottom:0;
	left:0;
	right:0;
	width:400px;
	height:240px;
}
.bottomline {
	position:absolute;
	letter-spacing:2px;
	font-family:"verdana";
	font-size:12px;
	text-align:center;
	top:330px;
	width:400px;
	height:40px;
	z-index:99;
	color:lightgrey;
}
a {
	position:relative;
	letter-spacing:2px;
	font-family:"verdana";
	font-size:12px;
	color:var(--colour4);
	text-decoration:none;
}
.controls {
	position:absolute;
	width:400px;
	text-align:center;
	top:260px;
	width:400px;
	font-size:20px;
	color:lightgrey;
}
#speed {
	transform:rotate(180deg) translateY(-8px);
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none;
}
input[type="range"] {
	-webkit-appearance:none;
	width:400px;
	background:white;
}
input[type="range"]::-webkit-slider-thumb {
	height:20px;
	width:16px;
	background:lightgrey;
	cursor:pointer;
}
/* LOOP CIRCLE POSITIONS *//* LOOP CIRCLE POSITIONS *//* LOOP CIRCLE POSITIONS *//* LOOP CIRCLE POSITIONS *//* LOOP CIRCLE POSITIONS */.loopblock {
	position:absolute;
	width:400px;
	height:120px;
	overflow:hidden;
	animation:opacity var(--speed) linear infinite;
}
.loopblock2 {
	position:absolute;
	top:0px;
	width:400px;
	height:120px;
	transform:rotate(180deg) translateX(160px) translateY(-120px);
	overflow:hidden;
	animation:opacity var(--speed) linear calc(var(--speed) / -4) infinite;
}
.loopblock3 {
	position:absolute;
	top:0px;
	width:400px;
	height:120px;
	overflow:hidden;
	animation:opacity var(--speed) linear calc(var(--speed) / -2) infinite;
}
.loopblock4 {
	position:absolute;
	top:0px;
	width:400px;
	height:120px;
	overflow:hidden;
	transform:rotate(180deg) translateX(-160px) translateY(-120px);
	animation:opacity var(--speed) linear calc((var(--speed) / -4) * 3) infinite;
}
.loopcircleblock {
	position:absolute;
	top:0px;
	width:400px;
	height:120px;
	overflow:hidden;
	transform:rotate(180deg) translateX(-160px) translateY(-120px);
	animation:z2 var(--speed) linear infinite;
}
.loopcircleblock2 {
	position:absolute;
	top:0px;
	width:400px;
	height:120px;
	overflow:hidden;
	animation:z1 var(--speed) linear infinite;
}
/* LOOP CIRCLES AS FAINT BACKGROUND *//* LOOP CIRCLES AS FAINT BACKGROUND *//* LOOP CIRCLES AS FAINT BACKGROUND *//* LOOP CIRCLES AS FAINT BACKGROUND *//* LOOP CIRCLES AS FAINT BACKGROUND */.loopcircle span {
	position:absolute;
	height:200px;
	width:200px;
	border-radius:100%;
	border-style:solid;
	border-color:var(--colour1a);
	border-width:20px;
}
.loopcircle span:nth-child(2) {
	height:160px;
	width:160px;
	left:20px;
	top:20px;
	border-color:var(--colour2a);
}
.loopcircle span:nth-child(3) {
	height:120px;
	width:120px;
	left:40px;
	top:40px;
	border-color:var(--colour3a);
}
.loopcircle span:nth-child(4) {
	height:80px;
	width:80px;
	left:60px;
	top:60px;
	border-color:var(--colour4a);
}
.loopcircle2 span {
	position:absolute;
	left:160px;
	height:200px;
	width:200px;
	border-radius:100%;
	border-style:solid;
	border-color:var(--colour4a);
	border-width:20px;
}
.loopcircle2 span:nth-child(2) {
	height:160px;
	width:160px;
	left:180px;
	top:20px;
	border-color:var(--colour3a);
}
.loopcircle2 span:nth-child(3) {
	height:120px;
	width:120px;
	left:200px;
	top:40px;
	border-color:var(--colour2a);
}
.loopcircle2 span:nth-child(4) {
	height:80px;
	width:80px;
	left:220px;
	top:60px;
	border-color:var(--colour1a);
}
.loopcircle3 span {
	position:absolute;
	left:160px;
	height:200px;
	width:200px;
	border-radius:100%;
	border-style:solid;
	border-color:var(--colour4a);
	border-width:20px;
}
.loopcircle3 span:nth-child(2) {
	height:160px;
	width:160px;
	left:180px;
	top:20px;
	border-color:var(--colour3a);
}
.loopcircle3 span:nth-child(3) {
	height:120px;
	width:120px;
	left:200px;
	top:40px;
	border-color:var(--colour2a);
}
.loopcircle3 span:nth-child(4) {
	height:80px;
	width:80px;
	left:220px;
	top:60px;
	border-color:var(--colour1a);
}
/* ANIMATED LOOPS *//* ANIMATED LOOPS *//* ANIMATED LOOPS *//* ANIMATED LOOPS *//* ANIMATED LOOPS */.loop span {
	position:absolute;
	height:100px;
	width:100px;
	border-radius:100% 0;
	border-style:solid;
	border-color:var(--colour1);
	border-width:20px 0 0 20px;
	transform-origin:bottom right;
	transform:rotate(-270deg);
	animation:spinleft calc(var(--speed)/2) linear infinite;
	border-bottom-right-radius:80%;
}
.loop span:nth-child(2) {
	height:80px;
	width:80px;
	left:20px;
	top:20px;
	border-color:var(--colour2);
}
.loop span:nth-child(3) {
	height:60px;
	width:60px;
	left:40px;
	top:40px;
	border-color:var(--colour3);
}
.loop span:nth-child(4) {
	height:40px;
	width:40px;
	left:60px;
	top:60px;
	border-color:var(--colour4);
}.........完整代码请登录后点击上方下载按钮下载查看