🎉前段时间想做个自己的个人博客 用于收录学习一些整理的知识点 在刷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 = thislet starArr = _this.$refs.starconsole.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>
🎉需要自取 侵权就删 有人认识的帮我艾特一下那位大佬，找不到他了
