css八大行星旋转实例

最新推荐文章于 2024-06-27 23:28:24 发布

Sunny_can

最新推荐文章于 2024-06-27 23:28:24 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/can_Sunshine/article/details/53306449

javascript 专栏收录该内容

40 篇文章

订阅专栏

这篇博客通过CSS展示了如何创建一个八大行星旋转的动画实例，使用了`@keyframes`来定义旋转动画，并通过调整不同行星的大小和旋转速度，模拟了行星运动的视觉效果。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 600px;
height: 600px;
margin: 100px auto;
background: rgba(0,0,0,0.5);
position: relative;
}
li{
width: 100%;
height: 100%;
border-radius: 50%;
border:1px solid #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

li:before{
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: pink;
box-shadow: 0 0 2px 1px rgba(255,255,255,0.8);
left: 100px;
top: 100px;
}

li:nth-child(1):before{
top: 66px;
}
li:nth-child(2):before{
top: -1px;
left: 214px;
}

li:nth-child(1){
animation: rotates 2s ease-in-out .2s infinite;
}
li:nth-child(2){
animation: rotates 1.5s ease infinite;
}
li:nth-child(3){
animation: rotates .5s ease-in-out .4s infinite;
}
li:nth-child(4){
animation: rotates 3.6s ease-in .7s infinite;
}
li:nth-child(5){
animation: rotates 1.4s ease-out .24s infinite;
}
li:nth-child(6){
animation: rotates 2s ease-in-out .2s infinite;
}
li:nth-child(2){
width: 90%;
height: 90%;
}
li:nth-child(3){
width: 80%;
height: 80%;
}
li:nth-child(4){
width: 70%;
height: 70%;
}
li:nth-child(5){
width: 60%;
height: 60%;
}
li:nth-child(6){
width: 50%;
height: 50%;
}
li:nth-child(7){
width: 40%;
height: 40%;
}
li:nth-child(8){
width: 30%;
height: 30%;
}
li:nth-child(9){
width: 20%;
height: 20%;
}

@keyframes rotates{
from{
transform:translate(-50%,-50%) rotate(0deg);
}
to{
transform:translate(-50%,-50%) rotate(360deg);
}
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>