css动效：气泡在屏幕上随机漂浮

最新推荐文章于 2025-11-22 10:30:11 发布

原创

最新推荐文章于 2025-11-22 10:30:11 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

博客介绍了使用React和CSS实现气泡运动效果的方法。实现方式为定位加随机改变x、y值，基于气泡大小相同的前提。具体逻辑在bubbleMovement函数，包括初始化气泡位置、方向和速度，用setInterval让气泡运动，同时监听边界和碰撞情况。

css实现气泡随机漂浮效果

实现效果
React代码
css代码
总结

实现效果

在这里插入图片描述

React代码

// 泡泡随机漂浮
// 这里的封装逻辑是基于每个泡泡大小一样进行封装的

import React,{
   
   FC,useState,useEffect,useRef} from 'react'
import styles from './index.less'

// 泡泡的背景图
import bubble1 from '../../img/bubblefloat/bubble1.png'
import bubble2 from '../../img/bubblefloat/bubble2.png'
import bubble3 from '../../img/bubblefloat/bubble3.png'
import bubble4 from '../../img/bubblefloat/bubble4.png'
import bubble5 from '../../img/bubblefloat/bubble5.png'
import bubble6 from '../../img/bubblefloat/bubble6.png'
import bubble7 from '../../img/bubblefloat/bubble7.png'


const Bubble:FC<any>  = (props)=>{
   
   

  useEffect(()=>{
   
   
      document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
  },[])
  

  const mainRef = useRef<any>()

  const BubblesRef = useRef<any>([])
  
  const getBubbles = (dom: any) => {
   
   
    if(!dom) return;
    BubblesRef.current.push(dom)
  }

  const bubblesArr = [
   {
   
   key:1,bgImg:bubble1},
   {
   
   key:2,bgImg:bubble2},
   {
   
   key:3,bgImg:bubble3},
   {
   
   key:4,bgImg:bubble4},
   {
   
   key:5,bgImg:bubble5},
   {
   
   key:6,bgImg:bubble6},
   {
   
   key:7,bgImg:bubble7},
  ]

 // 气泡运动的函数
  const bubbleMovement = ()=>{
   
   
        // 气泡运动区域
     const main