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

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

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