Vue怎么实现星空效果

Vue怎么实现星空效果

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

星空效果如下

1.星空背景子组件

<template><divclass="stars"><divclass="star"v-for="(item,index)instarsCount":key="index"ref="star"></div></div></template><script>exportdefault{name:'StarBackground',props:{},data(){return{starsCount:1200,distance:800}},mounted(){this.initStars()},methods:{initStars(){letstarArr=this.$refs.starstarArr.forEach(item=>{letspeed=0.2+(Math.random()*1)letthisDistance=this.distance+(Math.random()*300)item.style.transformOrigin=`00${thisDistance}px`item.style.transform=`translate3d(0,0,-${thisDistance}px)rotateY(${(Math.random()*360)}deg)rotateX(${(Math.random()*-50)}deg)scale(${speed},${speed})`})}}}</script><stylescopedlang="scss">@keyframesrotate{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:rotate90sinfinitelinear;bottom:-200px;}.star{width:2px;height:2px;background:#f7f7b8;position:absolute;top:0;left:0;backface-visibility:hidden;}</style>

2.登录页引用子组件

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

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

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