Cool chameleon

Achieve a sustained movement and color changing chameleon
Here Insert Picture Description
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五光十色的变色龙</title>
		<style type="text/css">
			.wrap{
				width: 440px;
				height: 440px;
				position: relative;
				left: 50%;
				margin-top: 200px;
				margin-left: -220px;
				overflow: hidden;		
			}			
			.bsl,.colorbg,.colorbg-wrap,.dongdong,.bg1,.colorbg-wrap1{
				position: absolute;
			}
			.bsl{
				left: 50%;
				top: 50%;
				width: 170px;
				height: 170px;	
				margin-left: -85px;
				margin-top: -85px;
				z-index: 6;
			}
			.colorbg-wrap{
				width: 170px;
				height: 170px;
				left: 50%;
				top: 50%;
				width: 170px;
				height: 170px;	
				margin-left: -85px;
				margin-top: -85px;
				overflow: hidden;
				z-index: 5;
			}
			.colorbg{
				width: 984px;
				height: 984px;
				z-index: 4;
				left: -180px;
				top: -70px;
				animation: rotate 10s linear infinite;
			}
			.dongdong{
				width: 440px;
				height: 440px;
				animation: rotate 20s linear infinite;
				z-index: 3;
				animation: rotate 30s linear infinite;
			}
			.colorbg-wrap1{
				width: 440px;
				height: 440px;
				z-index: 2;
				border-radius: 50%;
				overflow: hidden;
			}
			.bg1{
				z-index: 1;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
				}
				100%{transform: rotate(360deg);}
			}	
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="bsl"><img src="img/chameleon.png"/></div>
			<div class="colorbg-wrap">
				<div class="colorbg"><img src="img/palette.jpg"/></div>
			</div>
			<div class="dongdong"><img src="img/dong.png"/></div>
			<div class="colorbg-wrap1">
				<div class="colorbg bg1"><img src="img/palette.jpg"/></div>
			</div>
		</div>
	</body>
</html>
Guess you like
