vue页面特效：雨滴、流星

最新推荐文章于 2024-10-13 16:31:42 发布

Life a dream

最新推荐文章于 2024-10-13 16:31:42 发布

阅读量2.2k

点赞数 3

分类专栏：笔记 vue项目的创建文章标签： vue.js javascript 前端 css3

本文链接：https://blog.csdn.net/Li8L9xF/article/details/125333200

版权

笔记同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

vue项目的创建

3 篇文章 0 订阅

订阅专栏

组件引用：

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