<rain :rainNumber="20" :rotateDeg="40" :w="1" :h="140"></rain>
rotateDeg:代表方向,w代表宽,h代表长度 具体的代码如下封装
效果:
<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 class="line" :style="`animationDelay:${index*100}ms`"></div>
</div>
</div>
</template>
<script>
export default {
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"];
// console.log(rainArr);
rainArr.forEach((item) => {
// console.log(item.children);
item.style.top = Math.floor(Math.random() * 0 + 1) + "px";
item.style.left = Math.floor(Math.random() * 2000 + 1) + "px";
});
},
},
};
</script>
<style lang='less' 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(249, 249, 249),
rgba(11, 36, 66, 0.1)
);
}
}
}
@keyframes raining {
0% {
top: -0;
opacity: 0;
}
10% {
top: 10;
opacity: 0.5;
}
25% {
top: 200;
opacity: 0.5;
}
50% {
top: 400px;
opacity: 1;
}
75% {
top: 600px;
opacity: 0.5;
}
100% {
top: 800px;
opacity: 0;
}
}
</style>
原文地址:https://blog.csdn.net/Li8L9xF/article/details/125333200
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_40936.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。