Nuxt/docs/components/atoms/Star.vue

46 lines
1.3 KiB
Vue
Raw Normal View History

<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>