vue实现雨滴下雨效果

最新推荐文章于 2024-05-06 12:49:24 发布

YL雷子

最新推荐文章于 2024-05-06 12:49:24 发布

阅读量215

点赞数

文章标签：前端 css3

需要实现的效果：

html文件外部引入vue2和scss：

vscode安装Live Sass Compiler，新建 .scss 文件，点击wacth sass 生成css引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <link rel="stylesheet" href="./01.雨滴.css">
</head>

<body>
    <div id="app">
        <div>
            {{ msg}}
        </div>

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

    </div>
</body>
<script>
    var vm = new Vue({
        // 选项
        el: '#app',
        data: {
            msg: 'ssss',
            rainNumber: 20,
            w: 1,
            h: 50,
            rotateDeg: 0
        },
        mounted() {
            this.randomRain();
        },
        methods: {
            randomRain() {
                let rainArr = this.$refs["rain-item"];
                rainArr.forEach((item) => {
                    item.style.top = Math.floor(Math.random() * 0 + 1) + "px";
                    item.style.left = Math.floor(Math.random() * 2000 + 1) + "px";
                });
            },
        },
    })
</script>

</html>

封装组件：

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