本文实例为大家分享了Vue实现星空效果的具体代码,供大家参考,具体内容如下

Vue实现星空效果插图

需要实现上图的星空效果

1.星空背景子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<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.登录页引用子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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;很重要,需要把界面固定住,不然下拉会出现空白

发表评论

您的电子邮箱地址不会被公开。

评论(1)