实现动效星空背景

墨蓝 2022-12-25 15:56 216阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
    
            body {
                width: 100%;
                height: 100%;
                background: #000;
                background-size: 100%;
                perspective: 500px;
    
            }
    
            .stars {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 4px;
                height: 4px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                animation: fly 2s linear infinite;
                transform-style: preserve-3d;
            }
    
            .stars:before,
            .stars:after {
                content: "";
                position: absolute;
                width: inherit;
                height: inherit;
                box-shadow: inherit;
            }
    
            .stars:before {
                transform: translateZ(-300px);
                opacity: .6;
            }
    
            .stars:after {
                transform: translateZ(-600px);
                opacity: .4;
            }
    
            @keyframes fly {
                from {
                    transform: translateZ(0px);
                    opacity: .6;
                }
    
                to {
                    transform: translateZ(300px);
                    opacity: 1;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="stars"></div>
        <script>
            var w = document.documentElement.clientWidth * 1.2;
            var h = document.documentElement.clientHeight * 1.2;
            var star = document.getElementsByClassName("stars")[0];
            var n = 1000;
            //随机函数
            function randomNum(m, n) {
                return Math.floor(Math.random() * (n - m + 1) + m);
            }
            var str = '';
            for (var i = 0; i < n; i++) {
                var numX = randomNum(-w, w);
                var numY = randomNum(-h, h);
                var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
                str += numX + 'px' + ' ' + numY + 'px' + ' ' + color + ',';
            }
            str = str.slice(0, -1);
            star.style.boxShadow = str;
    
    
            $(function () {
    
                $('#main').fadeOut();
    
                $('#main').fadeIn('slow');
    
            })
        </script>
    </body>
    
    </html>