本文实例为大家分享了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;很重要，需要把界面固定住，不然下拉会出现空白
声明：本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！本站并非盈利站点，所有源码仅供学习交流使用，切勿上传使用并售卖
如有侵权请联系我们删除下架联系邮箱1685698671@qq.com。
评论(1)
1ww啊