实现动效星空背景

<!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>
实现动效星空背景

猜你喜欢
