HTML5 满天繁星+流星划过动画效果（CSS 动画）

作者：System 时间：2024年08月07日分类：所有,css 字数：2059



<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .stars {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            position: relative;
        }
        .stars-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateZ(0);
        }
        .star {
            position: absolute;
            top: 0;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 100%;
            opacity: 0.3;
            transform: translateZ(0);
            animation: twinkle 10s infinite alternate;
        }
        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 0.8; }
        }
        .meteor {
            position: absolute;
            top: -100px;
            width: 2px;
            height: 100px;
            background: #fff;
            opacity: 0.5;
            transform: translateX(50%);
            animation: shoot 20s linear infinite;
        }
        @keyframes shoot {
            0% { top: -100px; opacity: 0.5; }
            20% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="stars">
        <div class="stars-container">
            <!-- 生成随机的星星 -->
            <div class="star" style="left:100px;top:50px;"></div>
            <!-- 更多星星... -->
        </div>
        <!-- 流星 -->
        <div class="meteor"></div>
    </div>
    <script>
        const numStars = 1000; // 星星数量
        const starsContainer = document.querySelector('.stars-container');
 
        for (let i = 0; i < numStars; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            // 随机位置和大小
            star.style.left = Math.random() * 100 + '%';
            s
HTML5 满天繁星+流星划过动画效果（CSS 动画）

评论已关闭

推荐阅读
