Vue怎么实现星空效果

Vue怎么实现星空效果

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

星空效果如下

1.星空背景子组件

@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;}

2.登录页引用子组件

.body-bg{background-attachment:fixed;overflow:hidden;}.login-container{height:100%;width:100%;overflow:hidden;background-color:#050608;}

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

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