❤️前端使用HTML,CSS特效星空背景动态背景超好看❤️

最新推荐文章于 2025-03-27 11:24:34 发布

摸鱼记录保持者

最新推荐文章于 2025-03-27 11:24:34 发布

阅读量9.4k

点赞数 25

文章标签： html vue.js html5

本文链接：https://blog.youkuaiyun.com/m0_58363221/article/details/119926714

版权

本文介绍了一位博主如何制作一个带有星空背景特效的个人博客。通过分享代码和实现过程，读者可以了解到如何利用HTML、CSS和JavaScript创建一个动态、小清新的星空效果，同时提供了一个简单的代码实现和样式说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🎉前段时间想做个自己的个人博客用于收录学习一些整理的知识点在刷B站时看到了一位大佬博主的视频，我就跟着做了一下感觉很漂亮特效也还不错小清新的感觉也不像个别背景显得特别夸张就很拉胯，下面是我做的效果视频可以先看看我把代码放在下面了需要自取

🎉下面是代码：

<!--星空背景-->



<template>
    <div class="stars">

        <div @click="index" v-for="(item,index) in statrsCount" :key="index" ref="star" class="star"/>


    </div>
</template>

<script>
    export default {
        data(){
            return{
                statrsCount:1800,//星星数量
                distance:1000,//间距
            }
        },
        mounted(){
            let _this = this
            let starArr = _this.$refs.star
            console.log(starArr)
            starArr.forEach(item =>{
                var speed = 0.2 + (Math.random() * 1);
                var thisDistance = _this.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})`
            })
        }
    }
</script>

🎉样式：

<style >
    @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:50%;
        animation: rotate 90s infinite linear ;
        bottom: 0;
    }
    .star{
        width: 2px;
        height: 2px;
        background: #f7f7b8;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;
    }
    html,
    body{
        background: radial-gradient(200% 100% at bottom center,#f7f7b6,#e96f92,#1b2947);
        background: radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);
        background-attachment: fixed;
        overflow: hidden;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>

🎉需要自取侵权就删有人认识的帮我艾特一下那位大佬，找不到他了

平平淡淡才是真。奥特曼骑自行车 - 奥特曼表情包合集_奥特曼_卡通表情