利用CSS3实现宇宙效果
发布时间
阅读量：
阅读量
效果图：
核心代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20190717_CSS3_48_动画_宇宙</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #05081A;
}
/*
去除ul,li的默认样式
*/
ul, li {
padding: 0;
margin: 0;
list-style: none
}
/*
宇宙容器
*/
ul {
width: 600px;
height: 600px;
margin: 30px auto;
position: relative;
}
/*
每个圆环轨道
*/
li {
border-radius: 50%;
border: 1px solid #34384A;
position: absolute;
}
/*
最外层圆环的样式
*/
li:nth-child(1) {
width: 100%;
height: 100%;
/*
最外层圆环的动画相对最慢
*/
animation: rotate 16s linear infinite;
}
li:nth-child(2) {
width: 90%;
height: 90%;
left: 5%;
top: 5%;
animation: rotate 14s 200ms linear infinite;
}
li:nth-child(3) {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
animation: rotate 12s 400ms linear infinite;
}
li:nth-child(4) {
width: 70%;
height: 70%;
left: 15%;
top: 15%;
animation: rotate 10s 600ms linear infinite;
}
li:nth-child(5) {
width: 60%;
height: 60%;
left: 20%;
top: 20%;
animation: rotate 8s 800ms linear infinite;
}
li:nth-child(6) {
width: 50%;
height: 50%;
left: 25%;
top: 25%;
animation: rotate 6s 1000ms linear infinite;
}
li:nth-child(7) {
width: 40%;
height: 40%;
left: 30%;
top: 30%;
animation: rotate 4s 1.2s linear infinite;
}
li:nth-child(8) {
width: 30%;
height: 30%;
left: 35%;
top: 35%;
animation: rotate 2s 1.4s linear infinite;
}
li:nth-child(9) {
width: 20%;
height: 20%;
left: 40%;
top: 40%;
}
/*
最内存的太阳系
*/
li:nth-child(10) {
width: 10%;
height: 10%;
left: 45%;
top: 45%;
/*
去除边框样式
*/
border: none;
background-color: #E98618;
box-shadow: 1px 1px 20px 20px red;
}
/*
给所有的星球设置一个统一的样式
*/
ul li span {
width: 15px;
height: 15px;
display: block;
border-radius: 50%;
position: absolute;
}
/*
最外层轨道上面的星球样式
*/
ul li:nth-child(1) span {
background-color: #D1DA38;
left: 0;
top: 37%;
}
ul li:nth-child(2) span {
background-color: #863E01;
left: 7.5%;
top: 20%;
}
ul li:nth-child(3) span {
background-color: darkturquoise;
left: 2%;
bottom: 30%;
}
ul li:nth-child(4) span {
background-color: #CF0A5B;
left: 16%;
bottom: 10%;
}
ul li:nth-child(5) span {
background-color: darkorange;
left: 0;
top: 63%;
}
ul li:nth-child(6) span {
background-color: blueviolet;
left: 5%;
top: 20%;
}
/*
地球的样式
*/
ul li:nth-child(7) span {
background-color: green;
left: 90%;
top: 20%;
/*
地球自转（月亮围着地球转）
*/
animation: rotate 10s 1.4s linear infinite;
}
ul li:nth-child(8) span {
background-color: fuchsia;
left: 93%;
top: 67%;
}
/*
月亮的样式
*/
ul li:nth-child(7) span span {
width: 10px;
height: 10px;
position: absolute;
left: 120%;
top: 0;
background-color: white;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!--
宇宙
-->
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span>
<span></span>
</span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
</body>
</html>全部评论 (0)
还没有任何评论哟~