炫酷的变色龙

最新推荐文章于 2024-09-06 14:24:59 发布

wendy_QL

最新推荐文章于 2024-09-06 14:24:59 发布

阅读量367

点赞数 2

分类专栏： CSS HTML 文章标签： html css

本文链接：https://blog.csdn.net/wendy_QL/article/details/89247222

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

实现一个运动且持续变换色彩的变色龙
在这里插入图片描述

<!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>