day14CSS3实现银河系动态效果

最新推荐文章于 2021-08-03 19:59:45 发布

WEB-

最新推荐文章于 2021-08-03 19:59:45 发布

阅读量532

点赞数 1

文章标签： css3 html5 前端大前端

本文链接：https://blog.csdn.net/weixin_45637649/article/details/111656682

版权

<style>
    body{
        background-color: #000;
        perspective: 2000px;
        
    }
    .ul1{
        list-style-type: none;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -150px;
        /* border: 1px solid black; */
        perspective: 2000px;
        animation: run 5s linear infinite;
    }
    .li1{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        border: 1px solid gold;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 0 5px gold;
        
    }
    .li1:nth-child(1){
        transform: rotateX(20deg);
    }
    .li1:nth-child(2){
        transform: rotateX(40deg);
    }
    .li1:nth-child(3){
        transform: rotateX(60deg);
    }
    .li1:nth-child(4){
        transform: rotateX(80deg);
    }
    .li1:nth-child(5){
        transform: rotateX(100deg);
    }
    .li1:nth-child(6){
        transform: rotateX(120deg);
    }
    .li1:nth-child(7){
        transform: rotateX(140deg);
    }
    .li1:nth-child(8){
        transform: rotateX(160deg);
    }
    .li1:nth-child(9){
        transform: rotateX(180deg);
    }

    .li1:nth-child(10){
        transform: rotateY(20deg);
    }
    .li1:nth-child(11){
        transform: rotateY(40deg);
    }
    .li1:nth-child(12){
        transform: rotateY(60deg);
    }
    .li1:nth-child(13){
        transform: rotateY(80deg);
    }
    .li1:nth-child(14){
        transform: rotateY(100deg);
    }
    .li1:nth-child(15){
        transform: rotateY(120deg);
    }
    .li1:nth-child(16){
        transform: rotateY(140deg);
    }
    .li1:nth-child(17){
        transform: rotateY(160deg);
    }
    .li1:nth-child(18){
        transform: rotateY(180deg);
    }
    @keyframes run{
        from{
            transform:  rotateZ(0);
        }
        to{
            transform:  rotateZ(-360deg);
        }
    }
    /* 光圈 */
    .wrap{
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        box-shadow: 0 0 50px gray;
        animation: run2 2s linear infinite;
        border-radius: 50%;
        position: absolute;
        top: 27px;
        left: 450px;
    }
    @keyframes run2 {
       from{
           transform: rotateX(50deg) rotateY(-50deg) rotateZ(0);
       }
       to{
           transform: rotateX(50deg) rotateY(-50deg) rotateZ(360deg);
       }
    }
    .wrap2{
        width: 600px;
        height: 600px;
        border: 1px solid gray;
        box-shadow: 0 0 50px gray;
        border-radius: 50%;
        position: relative;
        left: 400px;
        top: -20px;
        animation: run3 10s linear infinite;
        transform-style: preserve-3d;

    }
    @keyframes run3{
        from{
            transform: rotateX(50deg) rotateY(-20deg) rotateZ(0deg);
        }
        to{
            transform: rotateX(50deg) rotateY(-20deg) rotateZ(360deg);
        }
    }
    .ul2{
        list-style-type: none;
        width: 100px;
        height: 100px;
        position: relative;
        transform-style: preserve-3d;
        
        /* border: 1px solid #fff; */
        perspective: 2000px;
        animation: run 5s linear infinite;
        transform-style: preserve-3d;
        margin-top: 60px;
    }
    .li2{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        border: 1px solid purple;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 0 10px purple;
        
    }
    .li2:nth-child(1){
        transform: rotateX(20deg);
    }
    .li2:nth-child(2){
        transform: rotateX(40deg);
    }
    .li2:nth-child(3){
        transform: rotateX(60deg);
    }
    .li2:nth-child(4){
        transform: rotateX(80deg);
    }
    .li2:nth-child(5){
        transform: rotateX(100deg);
    }
    .li2:nth-child(6){
        transform: rotateX(120deg);
    }
    .li2:nth-child(7){
        transform: rotateX(140deg);
    }
    .li2:nth-child(8){
        transform: rotateX(160deg);
    }
    .li2:nth-child(9){
        transform: rotateX(180deg);
    }

    .li2:nth-child(10){
        transform: rotateY(20deg);
    }
    .li2:nth-child(11){
        transform: rotateY(40deg);
    }
    .li2:nth-child(12){
        transform: rotateY(60deg);
    }
    .li2:nth-child(13){
        transform: rotateY(80deg);
    }
    .li2:nth-child(14){
        transform: rotateY(100deg);
    }
    .li2:nth-child(15){
        transform: rotateY(120deg);
    }
    .li2:nth-child(16){
        transform: rotateY(140deg);
    }
    .li2:nth-child(17){
        transform: rotateY(160deg);
    }
    .li2:nth-child(18){
        transform: rotateY(180deg);
    }
    /* 第三个 */
    .wrap3{
        width: 800px;
        height: 800px;
        border: 1px solid gray;
        box-shadow: 0 0 50px gray;
        border-radius: 50%;
        position: absolute;
        left: 300px;
        top: -120px;
        animation: run4 30s linear infinite;
        transform-style: preserve-3d;

    }
    @keyframes run4{
        from{
            transform: rotateX(50deg) rotateY(-20deg) rotateZ(0deg);
        }
        to{
            transform: rotateX(50deg) rotateY(-20deg) rotateZ(-360deg);
        }
    }
    .ul3{
        list-style-type: none;
        width: 100px;
        height: 100px;
        position: relative;
       
        
        /* border: 1px solid #fff; */
        perspective: 2000px;
        animation: run 5s linear infinite;
        transform-style: preserve-3d;
        margin-top: 100px;
    }
    .li3{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0px auto;
        border: 1px solid yellowgreen;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        box-shadow: 0 0 10px yellowgreen;
        
        
    }
    .li3:nth-child(1){
        transform: rotateX(20deg);
    }
    .li3:nth-child(2){
        transform: rotateX(40deg);
    }
    .li3:nth-child(3){
        transform: rotateX(60deg);
    }
    .li3:nth-child(4){
        transform: rotateX(80deg);
    }
    .li3:nth-child(5){
        transform: rotateX(100deg);
    }
    .li3:nth-child(6){
        transform: rotateX(120deg);
    }
    .li3:nth-child(7){
        transform: rotateX(140deg);
    }
    .li3:nth-child(8){
        transform: rotateX(160deg);
    }
    .li3:nth-child(9){
        transform: rotateX(180deg);
    }

    .li3:nth-child(10){
        transform: rotateY(20deg);
    }
    .li3:nth-child(11){
        transform: rotateY(40deg);
    }
    .li3:nth-child(12){
        transform: rotateY(60deg);
    }
    .li3:nth-child(13){
        transform: rotateY(80deg);
    }
    .li3:nth-child(14){
        transform: rotateY(100deg);
    }
    .li3:nth-child(15){
        transform: rotateY(120deg);
    }
    .li3:nth-child(16){
        transform: rotateY(140deg);
    }
    .li3:nth-child(17){
        transform: rotateY(160deg);
    }
    .li3:nth-child(18){
        transform: rotateY(180deg);
    }
</style>

<ul class="ul1">
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
    <li class="li1"></li>
</ul>
<!-- 光圈1 -->
<div class="wrap"></div>
<!-- 光圈2 -->
<div class="wrap2">       
        <ul class="ul2">
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
            <li class="li2"></li>
           
        </ul>
</div>
<!-- 光圈3 -->
<div class="wrap3">       
        <ul class="ul3">
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
            <li class="li3"></li>
           
           
        </ul>
</div>

WEB-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day14CSS3实现银河系动态效果

<style> body{ background-color: #000; perspective: 2000px; } .ul1{ list-style-type: none; width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -1
复制链接

扫一扫