太阳系小案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #000;
}
.sun{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
border-radius: 50%;
box-shadow: 0 0 30px 2px yellow;
}
.earth{
width: 300px;
height: 300px;
position: absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
border-radius: 50%;
border: 1px solid #ccc;
/*animation: rot 5s linear infinite;*/
}
.earth::after{
width: 30px;
height: 30px;
position: absolute;
left:0%;
top:50%;
margin-left:-15px;
margin-top:-15px;
border-radius: 50%;
background-color: dodgerblue;
content:"";
}
.moon{
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left:-25px;
top:50%;
margin-left: -5px;
margin-top:-5px;
transform-origin: 30px 5px;
animation: rot 3s linear infinite;
}
.mars{
width: 400px;
height: 400px;
position: absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
border-radius: 50%;
border: 1px solid #ccc;
animation: rot 8s linear infinite;
}
.mars::after{
width: 20px;
height: 20px;
position: absolute;
left:0%;
top:50%;
margin-left:-10px;
margin-top:-10px;
border-radius: 50%;
background-color: gold;
content:"";
}
.venus{
width: 500px;
height: 500px;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
border-radius: 50%;
border: 1px solid #ccc;
animation: rot 10s linear infinite;
}
.venus::after{
width: 40px;
height: 40px;
position: absolute;
left:0%;
top:50%;
margin-left:-20px;
margin-top:-20px;
border-radius: 50%;
background-color: red;
content:"";
}
@keyframes rot {
0%{
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
<div class="mars"></div>
<div class="venus"></div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-10875.html
