教你用CSS3做一个旋转的宇宙星球

最新推荐文章于 2024-08-31 12:29:09 发布

_小郑有点困了

最新推荐文章于 2024-08-31 12:29:09 发布

阅读量2.1k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_44706619/article/details/104205870

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

教你用CSS3做一个旋转的宇宙星球
可能略有瑕疵，无非就是先画一个圆圈，把小球定位到上面，然后再让圆圈旋转即可
直接上效果图
在这里插入图片描述
代码

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        * {            margin: 0;            padding: 0;        }
        body {            background-color: black;        }
        .box {            width: 500px;            height: 500px;            border: 1px solid black;            position: relative;            margin: 300px auto;            background: url('./img/asteroids_meteorids.png')no-repeat;            background-size: 165px 165px;            background-position: 168px 171px;            animation: aaa 10s infinite linear;        }
        .oneCircle {            width: 100px;            height: 100px;            border-radius: 50%;            border: 2px solid #fff;            position: relative;            margin: 200px 200px;            animation: aaa 10s infinite linear;        }
        .sun {            width: 50px;            height: 50px;            border-radius: 50%;            box-shadow: 0px 0px 18px orange;            background-color: orange;            position: absolute;            top: 50%;            left: 50%;            margin-top: -25px;            margin-left: -25px;        }
        .earth {            width: 10px;            height: 10px;            border-radius: 50%;            background-color: blue;            position: absolute;            top: 10px;            left: 10px;        }
        @keyframes aaa {            100% {                transform: rotate(360deg);            }        }
        .twoCircle {            width: 140px;            height: 140px;            border-radius: 50%;            border: 2px solid #fff;            position: relative;            margin: -620px auto;            animation: aaa 10s infinite linear;        }
        .two {            width: 15px;            height: 15px;            border-radius: 50%;            background-color: brown;            position: absolute;            top: 10px;            right: 10px;        }
        .threeCircle {            width: 180px;            height: 180px;            border-radius: 50%;            border: 2px solid #fff;            position: relative;            margin: 0px auto;            margin-top: 460px;            animation: bbb 15s infinite linear;        }
        .three {            width: 18px;            height: 18px;            border-radius: 50%;            background-color: yellow;            position: absolute;            bottom: 15px;            right: 15px;        }
        @keyframes bbb {            100% {                transform: rotate(360deg);            }        }
        .fourCircle {            width: 220px;            height: 220px;            border-radius: 50%;            border: 2px solid #fff;            position: relative;            margin: 0px auto;            margin-top: -200px;            animation: ccc 5s infinite linear;        }
        .four {            width: 18px;            height: 18px;            border-radius: 50%;            background-color: green;            position: absolute;            bottom: 20px;            left: 20px;        }
        @keyframes ccc {            100% {                transform: rotate(360deg);            }        }    </style></head>
<body>    <div class="box">        <div class="oneCircle">            <div class="sun"></div>            <div class="earth"></div>        </div>    </div>    <div class="twoCircle">        <div class="two"></div>    </div>    <div class="threeCircle">        <div class="three"></div>    </div>    <div class="fourCircle">        <div class="four"></div>    </div></body>
</html>