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);}
}