🎉前段時間想做個自己的個人博客 用于收錄學(xué)習(xí)一些整理的知識點 在刷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,//星星數(shù)量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>

🎉需要自取? 侵權(quán)就刪 有人認識的幫我艾特一下那位大佬，找不到他了

總結(jié)

以上是生活随笔為你收集整理的❤️前端使用HTML,CSS特效星空背景 动态背景 超好看❤️的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。