mirror of https://github.com/nuxt/nuxt.git
46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div ref="star" class="absolute bg-primary-300 dark:bg-white rounded-full opacity-100 star" :style="style" />
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, ref, computed, onMounted } from '@nuxtjs/composition-api'
|
|
export default defineComponent({
|
|
setup () {
|
|
const style = ref({})
|
|
const randomY = ref(null)
|
|
const randomX = ref(null)
|
|
const randomRadius = computed(() => Math.round(Math.random() * Math.round(4)))
|
|
const randomDuration = computed(() => Math.round(Math.random() * Math.round(10)))
|
|
|
|
onMounted(() => {
|
|
randomX.value = Math.random() * Math.floor(document.documentElement.clientWidth)
|
|
randomY.value = Math.random() * Math.floor(document.documentElement.clientHeight)
|
|
style.value = {
|
|
top: randomY.value + 'px',
|
|
left: randomX.value + 'px',
|
|
height: randomRadius.value + 'px',
|
|
width: randomRadius.value + 'px',
|
|
animationDuration: randomDuration.value + 's'
|
|
}
|
|
})
|
|
|
|
return {
|
|
style,
|
|
randomRadius,
|
|
randomDuration,
|
|
randomY,
|
|
randomX
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="postcss" scoped>
|
|
/* Stars */
|
|
.star {
|
|
animation-name: fade;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
</style>
|