UNPKG

vue3-starry-sky

Version:

# 组件下载

3 lines (2 loc) 2.18 kB
(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.Vue3StarrySky={},r.Vue))})(this,function(r,e){"use strict";var u=(()=>`.starry-sky-bg[data-v-469e5ae1]{width:100%;height:100vh;position:fixed;top:0;left:0;z-index:-100;background:radial-gradient(200% 100% at bottom center,#f7f7b6,#e96f92,#75517d,#1b2947);background:radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);background-attachment:fixed}@keyframes rotate-469e5ae1{0%{transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0)}to{transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-360deg)}}.stars[data-v-469e5ae1]{transform:perspective(500px);transform-style:preserve-3d;position:fixed;perspective-origin:50% 100%;left:50%;animation:rotate-469e5ae1 66s infinite linear;bottom:0;z-index:-99}.star[data-v-469e5ae1]{width:2px;height:2px;background:#f7f7b8;position:fixed;top:0px;left:0;backface-visibility:hidden} `)(),f=(t,a)=>{const o=t.__vccOpts||t;for(const[d,s]of a)o[d]=s;return o};const l={class:"starry-sky-bg"},p={class:"stars"};var n=f({__name:"starry-sky",props:{starsCount:{type:Number,default:()=>800},distance:{type:Number,default:()=>800}},setup(t){const a=t,o=e.ref();return e.onMounted(()=>{o.value.forEach(s=>{let i=.1+Math.random()*1,c=a.distance+Math.random()*300;s.style.transformOrigin=`0 0 ${c}px`,s.style.transform=`translate3d(0,0,-${c}px) rotateY(${Math.random()*360}deg) rotateX(${Math.random()*-50}deg) scale(${i},${i})`})}),(d,s)=>(e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("div",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.starsCount,i=>(e.openBlock(),e.createElementBlock("div",{key:i,class:"star",ref_for:!0,ref_key:"star",ref:o}))),128))])]))}},[["__scopeId","data-v-469e5ae1"]]);n.install=t=>{t.component(n.__name,n)};const _=[n];var m={install:t=>{_.forEach(a=>{t.component(a.__name,a)})}};r.StarrySky=n,r.default=m,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});