春天的晚上感觉还挺凉爽,不过已经不那么冷了,晚上在窗前又能看看星星了。
因此搞了这,看起来还是挺放松的。放到网站上看起来还挺好的。
逻辑还是比较简单的,就是控制svg的线段运动,在视窗内滑动显示。
代码也比较简单,如下:
采用vue+tailwindcss
<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";
interface Lines {
x1: number
y1: number
x2: number
y2: number
tx1: number
ty1: number
tx2: number
ty2: number
dur: number
}
const position: Ref<Lines[]> = ref([])
onMounted(() => {
let ps:Lines[] = []
let w = 300
let h = 150
for(let i = 0; i < 20; i++) {
let length = Math.random() * 50 + 4
let mlen = Math.max(w,h)
let x = Math.random() * mlen - mlen
let y = Math.random() * mlen - mlen
let distance = Math.max(w-x, h-y)
let ex = x + distance
let ey = y + distance
ps.push({
x1: x,
y1: y,
x2: x + length,
y2: y + length,
tx1: ex,
ty1: ey,
tx2: ex + length,
ty2: ey + length,
dur: distance / mlen * (4 + Math.random())
})
}
position.value = ps
})
</script>
<template>
<svg class="w-[300px] h-[150px] bg-slate-800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line v-for="(p, i) in position"
:x1="p.x1" :y1="p.y1" :x2="p.x2" :y2="p.y2"
style="stroke:rgb(99,99,99); stroke-width:1">
<animate attributeName="x1" attributeType="XML"
:from="p.x1" :to="p.tx1"
begin="0s" :dur="p.dur"
repeatCount="indefinite"/>
<animate attributeName="y1" attributeType="XML"
:from="p.y1" :to="p.ty1"
begin="0s" :dur="p.dur"
repeatCount="indefinite"/>
<animate attributeName="x2" attributeType="XML"
:from="p.x2" :to="p.tx2"
begin="0s" :dur="p.dur"
repeatCount="indefinite"/>
<animate attributeName="y2" attributeType="XML"
:from="p.y2" :to="p.ty2"
begin="0s" :dur="p.dur"
repeatCount="indefinite"/>
</line>
</svg>
</template>