Vue星空效果
Song_Estelle 人气:0需要实现上图的星空效果
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;
很重要,需要把界面固定住,不然下拉会出现空白
加载全部内容