vue实现漂亮星空，超级简单
1.创建vue项目： vue create demo
2.注册vuecli : npm i element-ui -S
3.加载依赖 ：npm i
4.运行项目 :npm run serve
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>web</title><style>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;}</style>
</head>
<body><div id="app"></div>
</body>
</html><template><div class="body"><div class="stars" ref="starsRef"><div class="star" v-for="(item, index) in starsCount" :key="index"></div></div></div></template><script>import { onMounted, ref } from "vue";export default {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,};},};</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><template><div id="app"><MyStar></MyStar></div>
</template><script>
import MyStar from './components/MyStar.vue';export default {name: 'App',components: {MyStar}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
