怎么用CSS3制作環(huán)形星星發(fā)光動(dòng)畫

這篇文章主要介紹“怎么用CSS3制作環(huán)形星星發(fā)光動(dòng)畫”，在日常操作中，相信很多人在怎么用CSS3制作環(huán)形星星發(fā)光動(dòng)畫問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS3制作環(huán)形星星發(fā)光動(dòng)畫”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

html源碼：

    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>

css源碼：

   <style type="text/css">
        *{margin:0;padding:0;}
        html,body{
            height:100%;
        }
        body{
            background:radial-gradient(ellipse at center,#34679a 0%, #214163 50%, #0d1926 100%);/*徑向漸變   橢圓*/
        }
        body > div{
            width:200px;/*寬度 px像素  cm*/
            height:200px;/*高度*/
            border:1px #fff solid;/*邊框 寬度 風(fēng)格 顏色*/
            border-radius:50%;/*圓角*/
            position:absolute;
            top:15%;
            left:50%;
            margin-left:-101px;
            transform:rotateX(80deg) rotateY(20deg);
            transform-style:preserve-3d;
        }
        body > div:nth-of-type(2){
            transform:rotateX(-80deg) rotateY(20deg);
        }
        body > div:nth-of-type(3){
            transform:rotateX(-70deg) rotateY(60deg);
        }
        body > div:nth-of-type(4){
            transform:rotateX(70deg) rotateY(60deg);
        }
        body > div:first-of-type:after{
            width:40px;
            height:40px;
            content:"";
            background:#fff;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-20px;
            margin-left:-20px;
            transform:rotateX(80deg);
            border-radius:50%;
            animation:nucleus 2s infinite linear;
        }
        body > div > div{
            width:200px;
            height:200px;
            position:relative;
            transform-style:preserve-3d;
            animation:trail 1s infinite linear; /*自定義動(dòng)畫  動(dòng)畫名稱 時(shí)間 播放次數(shù) 速度*/
        }
        body > div > div:after{
            content:"";
            width:5px;
            height:5px;
            background:#fff;
            position:absolute;
            top:-5px;
            left:50%;
            margin-left:-5px;
            border-radius:50%;
            box-shadow:0 0 12px #fff;/*陰影 x y 模糊度 顏色*/
            animation:particle 1s infinite linear;
        }
        /*自定義動(dòng)畫執(zhí)行*/
        @keyframes trail{
            from{
                transform:rotateZ(0deg);
            }
            to{
                transform:rotateZ(360deg);
            }
        }
        @keyframes particle{
            from{
                transform:rotateX(90deg) rotateY(0deg);
            }
            to{
                transform:rotateX(90deg) rotateY(-360deg);
            }
        }
        @keyframes nucleus{
            0%{
                box-shadow:0 0 0 transparent;
            }
            50%{
                box-shadow:0 0 25px #fff;
            }
            100%{
                box-shadow:0 0 0 transparent;
            }
        }
        body > div:nth-of-type(2) > div,
        body > div:nth-of-type(2) > div:after{
            animation-delay:-0.5s;
        }
        body > div:nth-of-type(3) > div,
        body > div:nth-of-type(3) > div:after{
            animation-delay:-1s;
        }
        body > div:nth-of-type(4) > div,
        body > div:nth-of-type(4) > div:after{
            animation-delay:-1.5s;
        }

   </style>

到此，關(guān)于“怎么用CSS3制作環(huán)形星星發(fā)光動(dòng)畫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！