Vue怎么实现星空效果

本篇内容主要讲解“Vue怎么实现星空效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue怎么实现星空效果”吧!

星空效果如下

1.星空背景子组件

<template>  <div class="stars">    <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>  </div></template><script>export default {  name: 'StarBackground',  props: {},  data() {    return {      starsCount: 1200,      distance: 800    }  },  mounted() {    this.initStars()  },  methods: {    initStars() {      let starArr = this.$refs.star      starArr.forEach(item => {        let speed = 0.2 + (Math.random() * 1)        let 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 scoped lang="sCSS">@keyframes rotate {  0% {    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);  }  100% {    transform: perspective(600px) 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: -200px;}.star {  width: 2px;  height: 2px;  background: #f7f7b8;  position: absolute;  top: 0;  left: 0;  backface-visibility: hidden;}</style>

2.登录页引用子组件

<template>  <div class="login-container">    <star-background />  </div></template><script>import StarBackground from './components/StarBackground'export default {  beforeCreate: function() {    document.getElementsByTagName('body')[0].className = 'body-bg'  },  components: { StarBackground }}</script><style lang="scss">.body-bg {  background-attachment: fixed;  overflow: hidden;}.login-container {  height: 100%;  width: 100%;  overflow: hidden;  background-color: #050608;}</style>

background-attachment: fixed;很重要，需要把界面固定住，不然下拉会出现空白

到此，相信大家对“Vue怎么实现星空效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！