css实现红包雨动效

最新推荐文章于 2023-09-22 15:45:22 发布

原创

最新推荐文章于 2023-09-22 15:45:22 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

博客介绍了使用React和CSS实现红包动画效果。实现方法是利用CSS循环动画，监听动画循环结束重设红包横向位置，通过动画延时控制红包不同时下落。倒计时结束时清除CSS动画并让点击事件失效，代码中用ref读取state更新值以避免闭包问题，但该方法存在灵敏度不高、红包数量不均和重叠等缺点。

提示：该实现方法灵敏度似乎不高并且如果一直不点击红包，或者触发点击过慢，会出现屏幕上红包过多的问题（就是说不能让屏幕上的红包一直保持在一个均匀的量），另外一个缺点就是红包会重叠

效果

在这里插入图片描述

React代码

// 红包雨游戏
import React, {
   
    useEffect, useRef, useState } from "react"
import styles from './index.less'

const Game = ()=>{
   
   
    useEffect(()=>{
   
   
      document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
      // 执行红包雨创建函数
      createRedPacket()
      setTimeout(()=>{
   
   
        countDown()
      },500)
    },[])

    const [nums,setNums] = useState(0)
    const [countdown,setTime] = useState(15)
  
    const ref = useRef<any>()
  
    const timeRef = useRef<any>()
    const timerRef = useRef<any>()
    timeRef.current = countdown
  
    const numsref = useRef<any>()
    numsref.current = nums

     // 红包雨元素创建
  const createRedPacket = ()=>{
   
   
    // 红包个数
    const rainCount = 38
    const rainFragment = document.createDocumentFragment()

    let delay = 0;

  for (let i = 0; i < rainCount; i++) {
   
   
    let container =  document.createElement('div');

    // 光晕
    let halo =  document.createElement('div');
    let rainEle = document.createElement('div');
    let plusOne = document.createElement('div');
    // 设置一下点击区域 红包图片背景点击区域太大了
    let click = document.createElement('div');

    container.className = `${
     
     styles.container}`;
    click.className =  `${
     
     styles.rainclick}`;
    rainEle.className = `${
     
     styles.rain}`;
    plusOne.className = `${
     
     styles.plusOne}

最低0.47元/天解锁文章