花火baby 2024-05-16 14:12:34

星星闪烁的星空

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="body">
            <div class="stars" ref="starsRef">
                <div class="star" v-for="(item, index) in starsCount" :key="index"></div>
            </div>
        </div>
    </div>
</body>
<script>
    const { createApp, ref, onMounted } = Vue

    const app = createApp({
        setup() {
            let starsRef = ref(null);

            const starsCount = 800; //星星数量
            const distance = 900; //间距

            onMounted(() => {
                let starNodes = Array.from(starsRef.value.children);
                starNodes.forEach((item) => {
                    let speed = 0.2 + Math.random() * 1;
                    let thisDistance = distance + Math.random() * 300;
                    item.style.transformOrigin = `0 0 ${thisDistance}px`;
                    item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`;
                });
            });

            return {
                starsRef,
                starsCount,
            };
        },
    })
    app.mount('#app')
</script>

<style lang="css" scoped>
    .body {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: radial-gradient(200% 100% at bottom center,
                #f7f7b6,
                #e96f92,
                #1b2947);
        background: radial-gradient(200% 105% at top center,
                #1b2947 10%,
                #75517d 40%,
                #e96f92 65%,
                #f7f7b6);
        background-attachment: fixed;
        overflow: hidden;
    }

    @keyframes rotate {
        0% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }

        100% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
    }

    .stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: absolute;
        perspective-origin: 50% 100%;
        left: 45%;
        animation: rotate 90s infinite linear;
        bottom: 0;
    }

    .star {
        width: 2px;
        height: 2px;
        background: #f7f7b6;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
    }
</style>

</html>

评论

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.3. UTC+08:00, 2024-11-28 11:55
浙ICP备14020137号-1 $bản đồ khách truy cập$