css3夜晚星空

最新推荐文章于 2024-05-21 23:21:19 发布

苦逼的猿宝

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量354

点赞数 8

分类专栏： html+css 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/136386424

版权

html+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vw;
            height: 100vh;
            background-color: #000;
        }

        .moon {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #F5FFFA;
            box-shadow: 0 0 60px #F5FFFA;
            position: absolute;
            left: 80%;
            top: 150px;
            animation: myMoon 20s linear;
        }

        @keyframes myMoon {
            0% {
                left: 60%;
                top: 350px;
                opacity: 0;
            }

            100% {
                left: 80%;
                top: 150px;
                opacity: 1;
            }
        }

        img {
            width: 8px;
            height: 8px;
            opacity: 0;
            position: absolute;
            left: 0px;
            top: 0px;
            animation: myStar 2s ease-in-out infinite;
        }

        @keyframes myStar {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 0.4;
            }

            100% {
                opacity: 0;
            }
        }

        .star {
            width: 1px;
            display: block;
            position: absolute;
            background-color: transparent transparent transparent rgba(255, 255, 255, .5);
            opacity: 0;
            animation: star 4s linear infinite;
        }

        .star::after {
            content: '';
            display: block;
            border: 1px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .5);
            transform: rotate(-45deg);
        }

        @keyframes star {
            0% {
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: translate(-500px, 300px);
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="moon"></div>
    </div>
    <script>
        var width = document.body.clientWidth - 20
        var height = document.body.clientHeight - 20

        //随机生成星星
        for (var i = 0; i < 70; i++) {
            var img = document.createElement('img')
            document.body.appendChild(img)
            img.src = './imgs/star.png'
            img.style.left = Math.random() * width + 'px'
            img.style.top = Math.random() * height + 'px'
            img.style.animationDelay = Math.random() * 3 + 's' //添加动画延迟时间
        }

        //随机生成流星
        for (var i = 0; i < 10; i++) {
            var lx = document.createElement('div')
            lx.className = 'star'
            lx.style.right = (Math.random() * 400 + 150) + 'px'
            lx.style.top = (Math.random() * 200 + 100) + 'px'
            lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
            document.body.appendChild(lx)
        }
    </script>
</body>

</html>