宝石旋转.html

小阴学习吧

已于 2024-08-28 20:10:43 修改

阅读量1.9k

点赞数

分类专栏： html 文章标签： css3 css html

于 2022-05-26 18:06:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45354103/article/details/124989531

版权

html 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用CSS3来实现宝石的3D旋转效果，详细解析了相关CSS属性的使用，包括transform、animation等，帮助读者理解并掌握动态展示宝石的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

宝石旋转.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宝石旋转</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	div{
		width: 592px;
		height: 534px;
		position: relative;
		background: url("../1images第8章素材/images/mofa.png") no-repeat;
	}
	.waihuan{
		display: inline-block;
		width: 503px;
		height: 477px;
		background: url("../1images第8章素材/images/waihuan.png") no-repeat;
		position: absolute;
		left: 8%;
		top:7%;
		animation: xuanzhuan1 10s linear 0s infinite;	
	}
	@keyframes xuanzhuan1{
		from{
			transform: rotate(0);
		}
		to{
			transform: rotate(360deg);
		}
	}
	.neihuan{
		display: inline-block;
		width: 274px;
		height: 274px;
		background: url("../1images第8章素材/images/neihuan.png") no-repeat;
		position: absolute;
		left: 27%;
		top:25%;
		animation: xuanzhuan2 30s linear 0s infinite;	
	}
	@keyframes xuanzhuan2{
	from{
			transform: rotate(360deg);
		}
		to{
			transform: rotate(0);
		}
	}
	.shitou{
		display: inline-block;
		width: 142px;
		height: 220px;
		background: url("../1images第8章素材/images/shitou.png") no-repeat;
		position: absolute;
		left: 45%;
		top:42%;
		animation: fangda 1s linear 0s infinite alternate;	
	}
	@keyframes fangda{
	from{
			transform:scale(1);
		}
		to{
			transform: scale(1.03);
		}
	}
	.guang{
		display: inline-block;
		width: 1px;
		height: 1px;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top:50%;
		animation: faguang 1s linear 0s infinite alternate;	
	}
	@keyframes faguang{
	from{
			box-shadow: 0px 0px 30px 30px #ff6c00;
		}
		to{
			box-shadow: 0px 0px 60px 60px #feb002;
		}
	}
	
</style>
</head>

<body>
	
	<div>
		<span class="waihuan"></span>
		<span class="neihuan"></span>
		<span class="shitou"></span>
		<span class="guang"></span>
	</div>
</body>
</html>