欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3中的3d属性实现一个星空效果

程序员文章站 2022-07-12 23:33:22
...

在第一阶段css3新增属性的学习中,掌握了有关3d的知识,下面是利用transform属性的3d效果做的一个星空中星球围绕太阳旋转,实现了自转和公转效果;话不多说,直接code:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/main.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="mainbox">
			<div class="star sun">
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
				<div class="starline"></div>
			</div>
			<div class="pathway a">
					<div class="star mercury">
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
					   <div class="starline"></div>
				</div>
			</div>
			<div class="pathway b">
				<div class="star saturn">
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
				</div>
			</div>
			<div class="pathway c">
				<div class="star earth">
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
					<div class="starline"></div>
				</div>
			</div>
		</div>
		
	</body>

</html>

CSS:

html,body{
	height: 100%;
	padding: 0;
	margin: 0;
	background: #000;
	perspective: 1000px;
	overflow: hidden;
	background:url(../images/xk.jpg) no-repeat center;
	background-size:100% auto;
}
.mainbox{
	transform-style: preserve-3d;
	height: 100%;
	transform: rotateX(70deg) rotateY(-20deg);
}
.pathway{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 3px solid #b7b7b7;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	transform-style: preserve-3d;
	box-shadow: 30px 20px 150px #fff;
}
.pathway.a{
	animation: starrotate 8s linear;
	animation-iteration-count: infinite;
}
.pathway.b{
	width: 600px;
	height: 600px;
	animation: starrotate 15s linear;
	animation-iteration-count: infinite;
}
.pathway.c{
	width: 800px;
	height: 800px;
	animation: starrotate 20s linear;
	animation-iteration-count: infinite;
}

.star{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 300px;
	height: 300px;
	transform-style: preserve-3d;
	/*border: 1px solid #fff;*/
	animation: starrotate 10s linear;
	animation-iteration-count: infinite;
}
.starline{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	border: 1px solid #FFD700;
	border-radius: 50%;
	
	}
.starline:nth-child(1){
	transform: rotateY(20deg);
}
.starline:nth-child(2){
	transform: rotateY(40deg);
}
.starline:nth-child(3){
	transform: rotateY(60deg);
}
.starline:nth-child(4){
	transform: rotateY(80deg);
}
.starline:nth-child(5){
	transform: rotateY(100deg);
}
.starline:nth-child(6){
	transform: rotateY(120deg);
}
.starline:nth-child(7){
	transform: rotateY(140deg);
}
.starline:nth-child(8){
	transform: rotateY(160deg);
}
.starline:nth-child(9){
	transform: rotateY(180deg);
}
.starline:nth-child(10){
	transform: rotateX(20deg);
}
.starline:nth-child(11){
	transform: rotateX(40deg);
}
.starline:nth-child(12){
	transform: rotateX(60deg);
}
.starline:nth-child(13){
	transform: rotateX(80deg);
}
.starline:nth-child(14){
	transform: rotateX(100deg);
}
.starline:nth-child(15){
	transform: rotateX(120deg);
}
.starline:nth-child(16){
	transform: rotateX(140deg);
}
.starline:nth-child(17){
	transform: rotateX(160deg);
}
.starline:nth-child(18){
	transform: rotateX(180deg);
}
.sun .starline{
	box-shadow: 0px 0px 50px 0px #FFD700;
}
.mercury{
	width: 30px;
	height: 30px;
	left:98%;
}
.mercury .starline{
	border-color: #0000FF;
}
.saturn{
	width: 50px;
	height: 50px;
	left:97%;
}
.saturn .starline{
	border-color:#808000;
}
.earth{
	width: 80px;
	height: 80px;
	left:95%;
}
.earth .starline{
	border-color:#007AFF;
}

@keyframes starrotate{
	from{transform: rotateZ(0deg);}
	to{transform: rotateZ(360deg);}
}
效果css3中的3d属性实现一个星空效果

相关标签: css3 transform 3d