Vue實現(xiàn)星空效果

更新時間：2022年04月10日 10:23:03 作者：Song_Estelle

這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)星空效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)星空效果的具體代碼，供大家參考，具體內(nèi)容如下

需要實現(xiàn)上圖的星空效果

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;很重要，需要把界面固定住，不然下拉會出現(xiàn)空白

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: