母亲大人辛苦了（snowfall.jquery实现爱心掉落）

weixin_46465090

已于 2024-11-11 14:55:11 修改

阅读量447

点赞数 2

分类专栏：案例文章标签： jquery

于 2020-05-10 22:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46465090/article/details/106043079

版权

案例专栏收录该内容

5 篇文章

订阅专栏

本文是作者在母亲节献给所有母亲的祝福。通过介绍如何利用snowfall.jquery库实现爱心掉落的背景效果，展示了动态的爱心动画。尽管作者尝试动态设置颜色未果，但仍然分享了现有的实现，作为对妈妈的一份特别礼物。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

又是一年一度的母亲节，在这里小汪向所有母亲送上祝福，养育之恩，辛苦您了。
今天看到樱花掉落的背景感觉很好看，然后就搜索使用方法，忽然看到有大佬文章写了一个感恩母亲的文章，我也想写了玩，并发给自己的妈妈（喔噶桑），
但是我也没用过想动态设置几个颜色，结果实现不了（0.0）好丢人呀（留了7个颜色会玩的大佬试试吧）不过还是凑合着看看毕竟今天发出来才有意义
全部代码：

<!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-Compatible" content="ie=edge">
  <title>感谢母亲的养育</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-size: 0;
    }
    body {
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: 50% 50%;
    }
    .snowfall-flakes::before,
    .snowfall-flakes::after {
      content: "";
      display: inline-block;
      border-radius: 50px 50px 0 0;
      width: 20px;
      height: 30px;
      background: red;
    }
    .snowfall-flakes::before {
      transform: rotate(-45deg) translate(0px, 15px);
    }
    .snowfall-flakes::after {
      transform: rotate(45deg) translate(0px, -26px);
    }
  </style>
</head>
<body>
<h2 style="color: red; font-size: 20px;">祝妈妈：青 春 永 驻</h2>
  <img src="http://img3.imgtn.bdimg.com/it/u=364348493,1410641674&fm=11&gp=0.jpg" alt="">
  <script src="./jQuery/jquery-1.11.3.js"></script>
  <script src="./jQuery/js-背景/snowfall.jquery.js"></script>
  <script>
    let color = ["red", "orange", "yellow", "green", "Cyan", "blue", "Violet"];
    $(function () {
      setTimeout(function () {
        $(document).snowfall({
          falkeCount: 520, //设置爱心数目
          flakeColor: "none", //设置颜色
        })
      }, 1000);
    })
  </script>
</body>
</html>