官方微信 手机客户端访问推广帮助
登录 注册

3BBS»首页 › 教程分享 › 代码特效 › 新年红包雨（可复制源代码）

新年红包雨（可复制源代码）

[复制链接]
七夏（UID：1） 发表于 2025-1-1 18:43:39 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×

效果演示

图片

源代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年红包雨</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{margin:0;padding:0}.header{position:relative;z-index:100;width:100%;background:#ddd;height:52px}#petalbox{position:fixed;top:0;left:0;width:100%;z-index:98;pointer-events:none}#petalbox > div{position:absolute;-webkit-animation-iteration-count:1,1;-webkit-animation-direction:normal,normal;-webkit-animation-timing-function:linear,ease-in;-webkit-backface-visibility:hidden;animation-iteration-count:1,1;animation-direction:normal,normal;animation-timing-function:linear,ease-in;backface-visibility:hidden}#petalbox > div > img{position:absolute;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-timing-function:linear;-webkit-backface-visibility:hidden;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:linear;backface-visibility:hidden}@-webkit-keyframes fade{0%,90%{opacity:1}100%{opacity:0}}@keyframes fade{0%,90%{opacity:1}100%{opacity:0}}@-webkit-keyframes drop{0%{-webkit-transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(0,1100px,0)}}@keyframes drop{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,1100px,0)}}@-webkit-keyframes clockwiseSpin{0%{-webkit-transform:none}100%{-webkit-transform:rotate(480deg)}}@keyframes clockwiseSpin{0%{transform:none}100%{transform:rotate(480deg)}}@-webkit-keyframes counterclockwiseSpinAndFlip{0%{-webkit-transform:none}100%{-webkit-transform:rotate(-480deg)}}}@keyframes counterclockwiseSpinAndFlip{0%{transform:none}100%{transform:rotate(-480deg)}}.timenav .time_list .time1{-webkit-animation:lantern_shake1 3s linear both;-webkit-transform-origin:center top;animation:lantern_shake1 3s linear both;transform-origin:center top}@-webkit-keyframes lantern_shake1{0%,50%{-webkit-transform:none}25%{-webkit-transform:rotate(-4deg)}75%{-webkit-transform:rotate(4deg)}}@keyframes lantern_shake1{0%,50%{transform:none}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}.timenav .time_list .time2{-webkit-animation:lantern_shake2 3s linear both;-webkit-transform-origin:center top;-webkit-backface-visibility:hidden;animation:lantern_shake2 3s linear both;transform-origin:center top}@-webkit-keyframes lantern_shake2{0%,50%{-webkit-transform:none}25%{-webkit-transform:rotate(-6deg) translate3d(5px,0,0)}75%{-webkit-transform:rotate(6deg) translate3d(-5px,0,0)}}@keyframes lantern_shake2{0%,50%{transform:none}25%{transform:rotate(-6deg) translate3d(5px,0,0)}75%{transform:rotate(6deg) translate3d(-5px,0,0)}}.timenav .time_list .time3{-webkit-animation:lantern_shake3 3s linear both;-webkit-transform-origin:center top;-webkit-backface-visibility:hidden;animation:lantern_shake3 3s linear both;transform-origin:center top}@-webkit-keyframes lantern_shake3{0%,50%{-webkit-transform:none}25%{-webkit-transform:rotate(-8deg) translate3d(14px,0,0)}75%{-webkit-transform:rotate(8deg) translate3d(-14px,0,0)}}@keyframes lantern_shake3{0%,50%{transform:none}25%{transform:rotate(-8deg) translate3d(14px,0,0)}75%{transform:rotate(8deg) translate3d(-14px,0,0)}}.timenav .time_list:hover a{-webkit-animation:none;animation:none}.banner_tit,.banner_subtit{-webkit-animation:bounceInDown 0.8s both;animation:bounceInDown 0.8s both}.banner_subtit{-webkit-animation-delay:0.4s;animation-delay:0.4s}@-webkit-keyframes bounceInDown{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0)}to{-webkit-transform:none;opacity:1}}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none;opacity:1}}.banner_time{-webkit-animation:fadeIn 1s 1.2s both;animation:fadeIn 1s 1.2s both}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fireworks i{-webkit-animation:fireworkani 1.6s .2s ease both;-webkit-animation-iteration-count:2;animation:fireworkani 1.6s .2s ease both;animation-iteration-count:2}.fireworks .f2{-webkit-animation-delay:.6s;animation-delay:.6s}.fireworks .f3{-webkit-animation-delay:.3s;animation-delay:.3s}.fireworks .f4{-webkit-animation-delay:.8s;animation-delay:.8s}@-webkit-keyframes fireworkani{0%,9%{-webkit-transform:scale(.1);opacity:0}10%{-webkit-transform:scale(.1);opacity:1}95%{-webkit-transform:scale(1.5);opacity:.1}100%{-webkit-transform:scale(1.5);opacity:0}}@keyframes fireworkani{0%,9%{transform:scale(.1);opacity:0}10%{transform:scale(.1);opacity:1}95%{transform:scale(1.5);opacity:.1}100%{transform:scale(1.5);opacity:0}}.main_before,.main_after,.main_cont{-webkit-animation:contfadein 1s .5s both;animation:contfadein 1s .5s both}@-webkit-keyframes contfadein{0%{-webkit-transform:translate3d(0,100px,0);opacity:0}100%{-webkit-transform:none;opacity:1}}@keyframes contfadein{0%{transform:translate3d(0,100px,0);opacity:0}100%{transform:none;opacity:1}}.small_window .timenav{left:20px;margin-left:0}
    </style>
</head>

<body>
    <div id="petalbox"></div>
</body>
<script>
    (function(){var NUMBER_OF_LEAVES=80;function init(){var container=document.getElementById('petalbox');try{for(var i=0;i<NUMBER_OF_LEAVES;i++){container.appendChild(createALeaf())}}catch(e){}}function randomInteger(low,high){return low+Math.floor(Math.random()*(high-low))}function randomFloat(low,high){return low+Math.random()*(high-low)}function pixelValue(value){return value+'px'}function durationValue(value){return value+'s'}function createALeaf(){var leafDiv=document.createElement('div');var image=document.createElement('img');image.src='images/hb/petal'+randomInteger(1,10)+'.png';leafDiv.style.top=pixelValue(randomInteger(-200,-100));leafDiv.style.left=pixelValue(randomInteger(0,1920));var spinAnimationName=(Math.random()<0.5)?'clockwiseSpin':'counterclockwiseSpinAndFlip';leafDiv.style.webkitAnimationName='fade, drop';leafDiv.style.animationName='fade, drop';image.style.webkitAnimationName=spinAnimationName;image.style.animationName=spinAnimationName;var fadeAndDropDuration=durationValue(randomFloat(1.2,8.2));var spinDuration=durationValue(randomFloat(3,4));leafDiv.style.webkitAnimationDuration=fadeAndDropDuration+', '+fadeAndDropDuration;leafDiv.style.animationDuration=fadeAndDropDuration+', '+fadeAndDropDuration;var leafDelay=durationValue(randomFloat(0,2));leafDiv.style.webkitAnimationDelay=leafDelay+', '+leafDelay;leafDiv.style.animationDelay=leafDelay+', '+leafDelay;image.style.webkitAnimationDuration=spinDuration;image.style.animationDuration=spinDuration;leafDiv.appendChild(image);return leafDiv}init()})();
</script>
</html>

实现思路拆分

CSS 部分
/*petalbox*/
* {
  margin: 0;
  padding: 0;
}

重置所有元素的默认外边距和内边距。

.header {
  position: relative;
  z-index: 100;
  width: 100%;
  background: #ddd;
  height: 52px;
}

定义一个.header类，设置为相对定位，背景色为浅灰色，高度为52px。

#petalbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 98;
  pointer-events: none;
}

定义id为petalbox的元素，固定在页面顶部，宽度100%，z-index为98，设置pointer-events为none以确保不影响页面上的其他交互。

#petalbox > div {
  position: absolute;
  -webkit-animation-iteration-count: 1, 1;
  -webkit-animation-direction: normal, normal;
  -webkit-animation-timing-function: linear, ease-in;
  -webkit-backface-visibility: hidden;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
  animation-timing-function: linear, ease-in;
  backface-visibility: hidden;
}

为petalbox的直接子div设置绝对定位，定义了动画的迭代次数、方向、时间函数和背面可见性。

#petalbox > div > img {
  position: absolute;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  -webkit-backface-visibility: hidden;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  backface-visibility: hidden;
}

为petalbox的孙子级img元素设置绝对定位，定义了无限次交替动画和背面不可见。

@-webkit-keyframes fade {
  0%, 90% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
@keyframes fade {
  0%, 90% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

定义了一个名为fade的关键帧动画，使元素从完全不透明渐变到完全透明。

@-webkit-keyframes drop {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
      -webkit-transform: translate3d(0, 1100px, 0);
  }
}
@keyframes drop {
  0% {
      transform: translate3d(0, 0, 0);
  }
  100% {
      transform: translate3d(0, 1100px, 0);
  }
}

定义了一个名为drop的关键帧动画，使元素从原位置向下移动1100px。

@-webkit-keyframes clockwiseSpin {
  0% {
      -webkit-transform: none;
  }
  100% {
      -webkit-transform: rotate(480deg);
  }
}
@keyframes clockwiseSpin {
  0% {
      transform: none;
  }
  100% {
      transform: rotate(480deg);
  }
}

定义了一个名为clockwiseSpin的关键帧动画，使元素顺时针旋转480度。

@-webkit-keyframes counterclockwiseSpinAndFlip {
  0% {
      -webkit-transform: none;
  }
  100% {
      -webkit-transform: rotate(-480deg);
  }
}
@keyframes counterclockwiseSpinAndFlip {
  0% {
      transform: none;
  }
  100% {
      transform: rotate(-480deg);
  }
}

定义了一个名为counterclockwiseSpinAndFlip的关键帧动画，使元素逆时针旋转480度。

JavaScript 部分
(function() {
  /* Define the number of leaves to be used in the animation */
  var NUMBER_OF_LEAVES = 80;

定义了一个立即执行函数表达式（IIFE），并设置了一个变量NUMBER_OF_LEAVES，表示动画中使用的叶子数量。

/*
  Called when the "Falling Leaves" page is completely loaded.
  */
  function init() {
      /* Get a reference to the element that will contain the leaves */
      var container = document.getElementById('petalbox');

      /* Fill the empty container with new leaves */
      try {
          for (var i = 0;
               i < NUMBER_OF_LEAVES;

               i++) {
              container.appendChild(createALeaf());
          }
      }
      catch(e) {
      }
  }

定义了一个init函数，当页面完全加载时被调用。它获取petalbox元素的引用，并循环调用createALeaf函数来创建新的叶子元素。

  /*
   Receives the lowest and highest values of a range and
   returns a random integer that falls within that range.
   */
  function randomInteger(low, high) {
      return low + Math.floor(Math.random() * (high - low));
  }

定义了一个randomInteger函数，返回一个指定范围内的随机整数。

  /*
   Receives the lowest and highest values of a range and
   returns a random float that falls within that range.
   */
  function randomFloat(low, high) {
      return low + Math.random() * (high - low);
  }

定义了一个randomFloat函数，返回一个指定范围内的随机浮点数。

  /*
   Receives a number and returns its CSS pixel value.
   */
  function pixelValue(value) {
      return value + 'px';
  }

定义了一个pixelValue函数，将数字转换为CSS像素值。

  /*
   Returns a duration value for the falling animation.
   */
  function durationValue(value) {
      return value + 's';
  }

定义了一个durationValue函数，将数字转换为动画持续时间的字符串表示。

  /*
   Uses an img element to create each leaf. "Leaves.css" implements two spin
   animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
   function determines which of these spin animations should be applied to each leaf.
   */
  function createALeaf() {
      /* Start by creating a wrapper div, and an empty img element */
      var leafDiv = document.createElement('div');
      var image = document.createElement('img');

      /* Randomly choose a leaf image and assign it to the newly created element */
      image.src ='images/hb/petal'+ randomInteger(1, 10) + '.png';

      /* Position the leaf at a random location along the screen */
      leafDiv.style.top = pixelValue(randomInteger(-200, -100));
      leafDiv.style.left = pixelValue(randomInteger(0, 1920));

      /* Randomly choose a spin animation */
      var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin':'counterclockwiseSpinAndFlip';        /* Set the -webkit-animation-name property with these values */
      leafDiv.style.webkitAnimationName ='fade, drop';
      leafDiv.style.animationName ='fade,
nbsp, -webkit-transform, transform, opacity

相关帖子

小时候，看腻了农村的牛和马，长大后，来到了城里，才知道原来到处都是牛马！
回复

使用道具 举报

全部回复0 显示全部楼层
暂无回复，精彩从你开始！
发帖

快速回帖

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

七夏 Lv.10
管理员

  • 主题

    897

  • 回答

    340

  • 积分

    2446
虚位以待，此位置招租

商务推广

    此位置招租 黑粉猫影院-免费看电影 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
  • 一个提供站长技术交流、疑问解答
  • 网站源码源码下载与网站建设教程
  • 交易信息发布、友链互换的综合论坛
站长交流
站长杂谈
主机交流
域名交流
悬赏问答
交易大厅
域名出售
网站交易
主机交易
友链交换
资源大厅
程序源码
模板主题
模块插件
软件工具
教程分享
美化教程
建站教程
代码特效
经验分享

官方微信

手机APP

Powered by Discuz! X3.5 Licensed Copyright © 2023-2025, Tencent Cloud.

鲁ICP备20023396号-7
手机版|小黑屋|加入Q群|随便看看|Archiver|