组件引用

  <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进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注