新建StarBackground.vue组件
打开组件注释部分可以随机颜色
<template>
<div class="rain">
<div
v-for="(item,index) in rainNumber"
:key="index"
class="rain-item"
ref="rain-item"
:style="`transform:rotate(${rotateDeg}deg);width:${w}px;height:${h}px;`"
>
<div ref="line-item" class="line" :style="`animationDelay:${index*100}ms`"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
timer1: null
}
},
props: {
rainNumber: {
type: Number,
default: 0
},
rotateDeg: {
type: Number,
default: 0
},
w: {
type: Number,
default: 0
},
h: {
type: Number,
default: 0
}
},
mounted () {
this.randomRain()
},
methods: {
randomRain () {
let rainArr = this.$refs['rain-item']
// let lineArr = this.$refs['line-item']
rainArr.forEach((item) => {
item.style.top = Math.floor(Math.random() * 0 + 750) + 'px'
item.style.left = Math.floor(Math.random() * 2000 + 1) + 'px'
})
// let n = 0
// lineArr.forEach((item) => {
// item.style.background = this.generateRandomColors(40)[n++]
// })
},
generateRandomColor() {
const randomRed = Math.floor(Math.random() * 256); // 生成一个0到255之间的随机整数,代表红色通道的值。
const randomGreen = Math.floor(Math.random() * 256); // 生成一个0到255之间的随机整数,代表绿色通道的值。
const randomBlue = Math.floor(Math.random() * 256); // 生成一个0到255之间的随机整数,代表蓝色通道的值。
return `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`; // 返回一个字符串,格式为rgb(red, green, blue)
},
generateRandomColors(n) {
const colors = [];
for (let i = 0; i < n; i++) { // 循环n次,每次调用generateRandomColor函数生成一个颜色值,并将其添加到colors数组中。
colors.push(this.generateRandomColor());
}
return colors;
}
},
beforeDestroy () {
clearInterval(this.timer1)
}
}
</script>
<style lang='scss' scoped>
.rain {
width: 100%;
height: 100vh;
position: relative;
.rain-item {
position: absolute;
width: 2px;
height: 30px;
display: inline-block;
.line {
animation: raining 2s infinite linear;
position: absolute;
content: "";
top: -30px;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0px 5px 20px 0px #fcfcfc;
/* background: linear-gradient( //单独一种颜色
to top,
rgb(18, 142, 205),
rgba(18, 142, 205, 0.1)
);*/
}
}
}
@keyframes raining {
0% {
//transform: translateY(100%);
top: -0;
opacity: 0;
}
10% {
top: 100px;
opacity: 0.3;
}
25% {
top: 200px;
opacity: 0.5;
}
50% {
top: 400px;
opacity: 0.8;
}
75% {
top: 600px;
opacity: 0.5;
}
100% {
top: 800px;
opacity: 0.3;
transform: translateY(-100%);
}
}
</style>
在需要使用的页面引用
<style scoped>
.login-container {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
}
</style>
<template>
<div class="box" style="width: 100%;height: 100vh;">
<div class="login-container">
<!-- rainNumber:线条数量 rotateDeg:旋转角度 w:线条宽度 h:线条高度-->
<rain :rainNumber="40" :rotateDeg="180" :w="2" :h="140"></rain>
</div>
</div>
</template>
<script>
import rain from '@/components/StarBackground.vue';
export default {
components: {
rain
},
};
</script>