【html + css】星球球体

阡小年

已于 2022-08-08 17:12:10 修改

阅读量376

点赞数

分类专栏： bilibili视频源码文章标签： css html css3

于 2022-07-07 20:57:26 首次发布

本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667029

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果视频展示：

（html + css）星球球体

全部代码（放心粘贴）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: linear-gradient(to right,  #c0c0aa 0%, #1cefff 100%);
    }
    .mid{
        transform-style: preserve-3d;
        animation: roll 10s 0s linear infinite;
    }
    .mid>.ball{
        width: 400px;
        height: 400px;
        margin-top: 300px;
        left: 50%;
        margin-left: -150px;
        border: 0.5px solid rgb(83, 89, 92, 0.3);
        border-radius: 50%;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        position: absolute;

        animation: attle 10s 0s linear infinite;
    }
    .mid>div:nth-child(1){
        transform: rotateY(180deg);
    }
    .mid>div:nth-child(2){
        transform: rotateY(170deg);
    }
    .mid>div:nth-child(3){
        transform: rotateY(160deg);
    }
    .mid>div:nth-child(4){
        transform: rotateY(150deg);
    }
    .mid>div:nth-child(5){
        transform: rotateY(140deg);
    }
    .mid>div:nth-child(6){
        transform: rotateY(130deg);
    }
    .mid>div:nth-child(7){
        transform: rotateY(120deg);
    }
    .mid>div:nth-child(8){
        transform: rotateY(110deg);
    }
    .mid>div:nth-child(9){
        transform: rotateY(100deg);
    }
    .mid>div:nth-child(10){
        transform: rotateY(90deg);
    }
    .mid>div:nth-child(11){
        transform: rotateY(80deg);
    }
    .mid>div:nth-child(12){
        transform: rotateY(70deg);
    }
    .mid>div:nth-child(13){
        transform: rotateY(60deg);
    }
    .mid>div:nth-child(14){
        transform: rotateY(50deg);
    }
    .mid>div:nth-child(15){
        transform: rotateY(40deg);
    }
    .mid>div:nth-child(16){
        transform: rotateY(30deg);
    }
    .mid>div:nth-child(17){
        transform: rotateY(20deg);
    }
    .mid>div:nth-child(18){
        transform: rotateY(10deg);
    }

    @keyframes roll {
        0%{
            -webkit-transform: rotateZ(-30deg) rotateY(0deg);
            -moz-transform: rotateZ(-30deg) rotateY(0deg);
            -ms-transform: rotateZ(-30deg) rotateY(0deg);
            -o-transform: rotateZ(-30deg) rotateY(0deg);
            transform: rotateZ(-30deg) rotateY(0deg);
        }
        100%{
            -webkit-transform: rotateZ(-30deg) rotateY(360deg);
            -moz-transform: rotateZ(-30deg) rotateY(360deg);
            -ms-transform: rotateZ(-30deg) rotateY(360deg);
            -o-transform: rotateZ(-30deg) rotateY(360deg);
            transform: rotateZ(-30deg) rotateY(360deg);
        }
    }

    @keyframes roll2 {
        0%{
            -webkit-transform: rotateY(-30deg) rotate(0deg);
            -moz-transform: rotateY(-30deg) rotate(0deg);
            -ms-transform: rotateY(-30deg) rotate(0deg);
            -o-transform: rotateY(-30deg) rotate(0deg);
            transform: rotatY(-30deg) rotate(0deg);
        }
        100%{
            -webkit-transform: rotateY(-30deg) rotate(-360deg);
            -moz-transform: rotateY(-30deg) rotate(3-60deg);
            -ms-transform: rotateY(-30deg) rotate(-360deg);
            -o-transform: rotateY(-30deg) rotate(-360deg);
            transform: rotateY(-30deg) rotate(-360deg);
        }
    }

    .hock{
        width: 300px;
        height: 300px;
        margin: 0 auto;
        top: 250px;
        left: 50px;
        border: 0.5px solid rgb(83, 89, 92, 0.3);
        border-radius: 50%;
        /* 形成3d空间 */
        transform-style: preserve-3d;
        /* 便于观察 */
        transform: rotateX(75deg) rotateY(160deg);
        padding: 100px;
        border: 20px solid orange;
        border-radius: 100%;
        /* 加点阴影 */
        box-shadow: 0px 0px 420px #000;

        position: relative;
    }

    @keyframes attle {
        0%{
            background: #eae4e9;
        }
        13.33%{
            background: #fff1e6;
        }
        25%{
            background: #fde2e4;
        }
        38.33%{
            background: #fad2e1;
        }
        50%{
            background: #e2ece9;
        }
        68.33%{
            background: #bee1e6;
        }
        75%{
            background: #f0efeb;
        }
        83.33%{
            background: #dfe7fd;
        }
        100%{
            background: #cddafd;
        }
    }
</style>
<body>
    <div>
        <div class="mid">
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>
            <div class="ball"></div>   

            <div class="hock"> </div>
        </div>
    </div>
    
</body>
</html>