纯css实现螺旋加载-html代码-BFW代码库

纯css实现螺旋加载

代码语言：html

代码描述：纯css实现螺旋加载

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
			background-color: #1E0731;
		}
		footer{
			position: absolute;
			margin-top: 300px;
		}
		footer a{
			color: #F5E53A;
		}
		footer img{
			width: 32px;
			height: 32px;
			vertical-align: middle;
		}

		.wrapper{
			position: absolute;
			float: left;
			margin: 140px 100px;
		}

		.line{
			position: absolute;
			top: 0px;
			width: 2px;
			height: 8px;
			background-color: red;
		}

		.circle{
			position: absolute;
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: blue;
		}
		.circle-top{
			top: 0px;
			left: -3.5px;
		}
		.circle-bottom{
			bottom: 0px;
			left: -3.5px;
		}

		.dot{
			position: absolute;
			display: block;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			left: -1.5px;
		}

		.line1{
			margin-left: 0px;
			background-color: #2410CB;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > span{
			background-color: #D4141E;
		}
		.line1 > .dotted > .dot{
			background-color: #D4141E;
		}
		.line1 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}

		.line2{
			margin-left: 35px;
			background-color: #852DF4;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > span{
			background-color: #FC7E48;
		}
		.line2 > .dotted > .dot{
			background-color: #FC7E48;
		}
		.line2 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}

		.line3{
			margin-left: 70px;
			background-color: #F42DF1;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}
		.line3 > span{
			background.........完整代码请登录后点击上方下载按钮下载查看