CSS3红包雨效果

最新推荐文章于 2023-09-14 15:47:42 发布

Kai-Yang

最新推荐文章于 2023-09-14 15:47:42 发布

阅读量1.4k

点赞数 4

分类专栏：前端开发 CSS3动画文章标签： css3 javascript html 前端

本文链接：https://blog.csdn.net/weixin_43476677/article/details/115255358

版权

前端开发同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

CSS3动画

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、红包雨
- 1.示例代码
- 2.页面效果
二、扩展
总结

前言

当我们进入一些购物网站时，特别是搞活动的都可以看到红包雨，而我们可以通过 CSS3 动画 + JS 实现一个我们自己的红包雨效果。

一、红包雨

1.示例代码

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatile" content="ie=edge">
        <title>红包雨</title>
        <link rel="stylesheet" href="./style/rain.css">
    </head>
    <body>
        <div class="content">
            <div class="yudi" ></div>
        </div>
    </body>
    <script src="./js/jquery-3.4.1.min.js"></script><!--引入jQuery-->
    <script>
        let $content =$('.content');
        let initNumber = 0;
        for(let i=0; i<30; i++) //生成红包
        {
            let lefts = (Math.floor(Math.random()*5+2));
            let delay = (Math.floor(Math.random()*50+2));
            initNumber+=lefts;
            let $div = $('<div/>').addClass('yudi').css({
                "left":`${initNumber}%`,
                "top":`${lefts}%`,
                "animation-delay":`${delay/10}s`
            });
            $content.append($div);
        }
    </script>
</html>

css代码：

body, html{
    height: 100%;
}
.content{
    position: relative;
    height: 100%;
    background: #f2f2f2;
    overflow: hidden;
}
.content .yudi{
    position: absolute;
    opacity: 0;
    animation: drops 1.2s cubic-bezier(0.43, 0.01, 0.2, 0.43)  infinite; /*动画效果*/
    /*红包样式*/
    width: 60px;
    height: 60px;
    background: url(../image/hb.png) no-repeat;/*红包小图片可到iconfont.cn下载*/
    background-size: auto 60px;
}
@keyframes drops{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translate3d(10px,100vh,-10px);
    }
}

2.页面效果

PC端效果：
在这里插入图片描述
移动端效果：

二、扩展

红包雨的动画效果实现的，但实际应用时还会有红包的交互效果，该如何实现呢？一个简单的方法是可以给每个生成的红包增加一个点击事件，以此来实现交互。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatile" content="ie=edge">
        <title>红包雨</title>
        <link rel="stylesheet" href="./style/rain.css">
    </head>
    <body>
        <div class="content">
            <div class="yudi" ></div>
        </div>
    </body>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script>
        let $content =$('.content');
        let initNumber = 0;
        for(let i=0; i<30; i++) //生成红包
        {
            let lefts = (Math.floor(Math.random()*5+2));
            let delay = (Math.floor(Math.random()*50+2));
            initNumber+=lefts;
            let $div = $('<div/>').addClass('yudi').css({
                "left":`${initNumber}%`,
                "top":`${lefts}%`,
                "animation-delay":`${delay/10}s`
            });
             $div.click(function(){//给每个红包div添加点击事件
           			// 编写代码实现交互效果
             });
            $content.append($div);
        }
    </script>
</html>

这里的红包交互功能就不展开了，有兴趣的可以试着自己编写代码实现。

总结

以上内容讨论红包雨的简单实现，主要使用了 CSS3 动画效果和 JS 的循环生成，代码也比较简单，容易理解。

Kai-Yang

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS3红包雨效果

文章目录前言一、红包雨1.示例代码2.页面效果二、扩展总结前言当我们进入一些购物网站时，特别是搞活动的都可以看到红包雨效果，而我们可以通过 CSS3 动画 + JS 实现一个我们自己的红包雨效果。一、红包雨1.示例代码HTML代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫