<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>七彩灯</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 55px;
				border-radius: 50%;
				background: black;
				float: left;
			}
			#one{
				animation:one 5s infinite ;
			}
			#two{
				animation:two 5s infinite ;
			}
			#three{
				animation:three 5s infinite ;
			}
			#four{
				animation:four 5s infinite ;
			}
			#five{
				animation:five 5s infinite ;
			}
			#six{
				animation:six 5s infinite ;
			}
			#seven{
				animation:seven 5s infinite ;
			}
			@keyframes one{
				0%{ background:black ;}
				14%{ background:red ;}
				28%{background:black ;}
				43%{ background:black ;}
				57%{ background:black ;}
				71%{background:black ;}
				86%{ background:black ;}
				100%{ background:black ;}
			}
			@keyframes two{
				0%{ background:black ;}
				14%{ background:black ;}
				28%{background: orange;}
				43%{ background:black ;}
				57%{ background:black ;}
				71%{background:black  ;}
				86%{ background:black ;}
				100%{ background:black ;}
			}
			@keyframes three{
				0%{ background:black  ;}
				14%{ background:black  ;}
				28%{background:black  ;}
				43%{ background:yellow ;}
				57%{ background:black  ;}
				71%{background:black ;}
				86%{ background:black ;}
				100%{ background:black ;}
			}
			@keyframes four{
				0%{ background:black ;}
				14%{ background:black ;}
				28%{background:black ;}
				43%{ background:black ;}
				57%{ background:green ;}
				71%{background:black;}
				86%{ background:black ;}
				100%{ background:black ;}
			}
			@keyframes five{
				0%{ background:black ;}
				14%{ background:black ;}
				28%{background:black ;}
				43%{ background:black ;}
				57%{ background:black ;}
				71%{background:blue ;}
				86%{ background:black ;}
				100%{ background:black ;}
			}
			@keyframes six{
				0%{ background:black ;}
				14%{ background:black ;}
				28%{background:black ;}
				43%{ background:black ;}
				57%{ background:black ;}
				71%{background:black ;}
				86%{ background:cyan ;}
				100%{ background: black;}
			}
			@keyframes seven{
				0%{ background:black ;}
				14%{ background:black ;}
				28%{background:black ;}
				43%{ background:black ;}
				57%{ background:black ;}
				71%{background:black ;}
				86%{ background:black ;}
				100%{ background:purple ;}
			}
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
		<div id="two">
			
		</div>
		<div id="three">
			
		</div>
		<div id="four">
			
		</div>
		<div id="five">
			
		</div>
		<div id="six">
			
		</div>
		<div id="seven">
			
		</div>
	</body>
</html>