Vue實(shí)現(xiàn)星空效果
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)星空效果的具體代碼,供大家參考,具體內(nèi)容如下
需要實(shí)現(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.登錄頁(yè)引用子組件
<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;
很重要,需要把界面固定住,不然下拉會(huì)出現(xiàn)空白
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04如何解決element-ui動(dòng)態(tài)加載級(jí)聯(lián)選擇器默認(rèn)選中問(wèn)題
這篇文章主要介紹了如何解決element-ui動(dòng)態(tài)加載級(jí)聯(lián)選擇器默認(rèn)選中問(wèn)題,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09vue數(shù)據(jù)雙向綁定原理解析(get & set)
這篇文章主要為大家詳細(xì)解析了vue.js數(shù)據(jù)雙向綁定原理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶信息,根據(jù)用戶id與name生成token并返回,userinfo則是對(duì)token進(jìn)行獲取,在查出對(duì)應(yīng)值進(jìn)行返回,感興趣的朋友一起看看吧2022-05-05理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問(wèn)題淺析
總的來(lái)說(shuō)這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路,Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架,主要作用就是實(shí)現(xiàn)AJAX異步通信2023-01-01