CSS动效合集之实现气泡发散动画

news2024/12/23 11:17:08

前言

👏CSS动效合集之实现气泡发散动画,速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏!

1.实现效果

在这里插入图片描述

2.实现步骤

  • 定义一个数组bubbles,用来存储气泡列表的基本新,w表示宽高,x表示绝对定位中left的百分比
  • 注:以下代码基于vue
const bubbles = ref([
  {
    w: 8,
    x: 10,
  },
  {
    w: 9,
    x: 50,
  },
  {
    w: 4,
    x: 30,
  },
  {
    w: 5,
    x: 80,
  },
  {
    w: 4,
    x: 30,
  },
  {
    w: 4,
    x: 70,
  },
  {
    w: 6,
    x: 20,
  },
  {
    w: 8,
    x: 50,
  },
  {
    w: 4,
    x: 60,
  },
  {
    w: 6,
    x: 65,
  },
]);
  • 绘制父元素section,设置宽高为300px,相对定位

在这里插入图片描述

section {
  height: 300px;
  width: 300px;
  margin: 50px auto;
  position: relative;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 0px 9px 17px 4px rgba(0, 0, 0, 0.5);
}
  • section内添加子元素bubbles标签,设置宽高与父元素一致,绝对定位
  • 在bubbles用span标签循环展示气泡列表
<div class="bubbles">
  <span
    class="bubble"
    v-for="(item, index) in bubbles"
    :key="index"
     }"
  ></span>
</div>
  • 为span标签添加css变量,设置–w表示元素的宽高,–x表示绝对定位中left的百分比
<span
 class="bubble"
 v-for="(item, index) in bubbles"
 :key="index"
 :style="{
   '--w': item.w,
   '--x': item.x,
 }"
  • 气泡设置绝对定位,初始位置居于父元素的底部10%,水平居中,并设置宽高为–w,默认设置背景色为粉色

在这里插入图片描述

.bubble {
  position: absolute;
  width: calc(1px * var(--w));
  height: calc(1px * var(--w));  border-radius: 50%;
  left: calc(50% - calc(1px * calc(var(--w) / 2)));
  bottom: 10%;
  background: pink;
}
  • 为气泡添加发散动画
.bubble {
	+     animation: rise 3s infinite linear;
}
  • 实现气泡left由水平居中到对应列表中–x的变化,bottom位置由10%到100%的改变,opacity透明度由刚开始的0到中间0.8,最后0的变化

在这里插入图片描述



@keyframes rise {
  0% {
    left: calc(50% - calc(1px * calc(var(--w) / 2)));
    opacity: 0;
    bottom: 10%;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    left: calc(1% * var(--x));
    bottom: 90%;
    opacity: 0;
  }
}
  • 给每个气泡设置不同的动画延迟,实现错落的效果,在span标签上添加–d,表示当前标签动画延迟时间

在这里插入图片描述

<span
	class="bubble"
	v-for="(item, index) in bubbles"
	:key="index"
	:style="{
	'--w': item.w,
	'--x': item.x,
	'--d':
	parseInt(bubbles.length / 2) +
	1 -
	Math.abs(index - parseInt(bubbles.length / 2)),
	}"
></span>
.bubble {
	+  animation-delay: calc(600ms * var(--d));
}
  • 可以发现,设置了动画延迟,在初始阶段,会出现固定的气泡展示在中心位置,这不是我们想要的效果,修改span标签样式,设置其默认的透明度为0

在这里插入图片描述

.bubble {
	+  opacity: 0;
}
  • 当前动画时长是3s,动画延迟为间隔600ms * 延长单位,气泡列表长度为10个,我们尝试将动画延迟为间隔设置100ms,会发生什么呢?
    在这里插入图片描述
  • 可以发现,气泡发散效果变的不连贯,延迟的时间间隔不够大,如果想要气泡发散是比较连贯的效果,就需要去平衡动画总时长和延迟间隔
  • 为每个气泡设置不同的颜色,定义一个颜色数组colors
 colors: {
    type: Array,
    default: () => ["#00BABC", "#009FA4", "#00FFC0"],
  },
  • 每个气泡的颜色根据当前数据的索引从colors中获取
bubbles.value.forEach((i, index) => {
  i.c = props.colors[index]
});
  • 那么随之而来一个问题,当bubbles数据过多,colors不够用怎么解决?

  • 当colors不够用时候,就从colors的第一项继续赋值

  • 定义一个循环取值的方法

/**
 * 根据索引循环取数值的值,取模运算符(%)来实现循环取数组的值
 * @param {*} array
 * @param {*} sort
 * @returns
 */
export const forArrayValue = (array, sort) => {
  return array[sort % array.length];
};
  • bubbles重新赋值
bubbles.value.forEach((i, index) => {
  i.c = forArrayValue(props.colors, index);
});
  • 为每个气泡span标签添加–c变量,表示当前背景颜色

在这里插入图片描述

<span
	class="bubble"
	v-for="(item, index) in bubbles"
	:key="index"
	:style="{
	'--w': item.w,
	'--c': item.c,
	'--x': item.x,
	'--d':
	 parseInt(bubbles.length / 2) +
	 1 -
	 Math.abs(index - parseInt(bubbles.length / 2)),
	}"
></span>
.bubble {
 + background: var(--c);
}
  • 为其父元素bubbles设置溢出隐藏,以防left位置变化超出当前容器,设置z-index为-1,以防遮挡到父元素其他内容
.bubbles {
 + z-index: -1;
 + overflow: hidden;
}
  • 这样就完整的实现啦~

在这里插入图片描述

  • 当然,你可以可以通过代码,动态的去生成气泡列表,使用Math.random生成其位置和大小,实现原理与上述一致~,这里就不在赘述了

3.实现代码

<template>
  <section>
    <div class="bubbles">
      <span
        class="bubble"
        v-for="(item, index) in bubbles"
        :key="index"
        :style="{
          '--w': item.w,
          '--c': item.c,
          '--x': item.x,
          '--d':
            parseInt(bubbles.length / 2) +
            1 -
            Math.abs(index - parseInt(bubbles.length / 2)),
        }"
      ></span>
    </div>
  </section>
</template>
<script setup>
import { ref } from "vue";
import { forArrayValue } from "@/utils/tools";
const props = defineProps({
  colors: {
    type: Array,
    default: () => ["#00BABC", "#009FA4", "#00FFC0"],
  },
});
const bubbles = ref([
  {
    w: 8,
    x: 10,
  },
  {
    w: 9,
    x: 50,
  },
  {
    w: 4,
    x: 30,
  },
  {
    w: 5,
    x: 80,
  },
  {
    w: 4,
    x: 30,
  },
  {
    w: 4,
    x: 70,
  },
  {
    w: 6,
    x: 20,
  },
  {
    w: 8,
    x: 50,
  },
  {
    w: 4,
    x: 60,
  },
  {
    w: 6,
    x: 65,
  },
]);
bubbles.value.forEach((i, index) => {
  i.c = forArrayValue(props.colors, index);
});
</script>
<style lang="less" scoped>
section {
  height: 300px;
  width: 300px;
  margin: 50px auto;
  position: relative;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 0px 9px 17px 4px rgba(0, 0, 0, 0.5);
}
.bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}
.bubble {
  position: absolute;
  width: calc(1px * var(--w));
  height: calc(1px * var(--w));
  background: var(--c);
  border-radius: 50%;
  left: calc(50% - calc(1px * calc(var(--w) / 2)));
  opacity: 0;
  bottom: 10%;
  animation: rise 3s infinite linear;
  animation-delay: calc(600ms * var(--d));
}
@keyframes rise {
  0% {
    left: calc(50% - calc(1px * calc(var(--w) / 2)));
    opacity: 0;
    bottom: 10%;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    left: calc(1% * var(--x));
    bottom: 90%;
    opacity: 0;
  }
}
</style>

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助,记得点赞+关注+收藏鸭 🍕
更多相关内容,关注🍥苏苏的bug,🍡苏苏的github,🍪苏苏的码云~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1019554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一篇关于vue的入门的详细介绍

目录 一.介绍 二.库和框架的区别 三.什么是MVVM模式 四.实例 4.1. Vue开发示例 4.2. 双向数据绑定 4.3. 生命周期 好啦&#xff0c;今天的分享就到这了&#xff0c;希望能够帮到你呢&#xff01;&#x1f60a;&#x1f60a; 一.介绍 Vue.js是一种流行的JavaScript框架&am…

【CNN-FPGA开源项目解析】01--floatMult16模块

文章目录 (基础)半精度浮点数的表示和乘运算16位半精度浮点数浮点数的乘运算 floatMult16完整代码floatMult16代码逐步解析符号位sign判断指数exponent计算尾数fraction计算尾数fraction的标准化和舍位整合为最后的16位浮点数结果[sign,exponent,fraction] 其他变量宽度表alway…

软件系统性能测试报告+测试策略

一、服务背景 性能测试主要是针对信息系统的应用性能指标制订性能测试方案&#xff0c;通过自动化的测试工具执行测试用例&#xff0c;模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试,负载测试和压力测试都属于性能测试&#xff0c;两者可以结合进行。 通…

Servlet 和 Cookie-Session 学习笔记(基础)

简单来说&#xff1a;是运行在服务器端的 Java 程序&#xff0c;它作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。 用处&#xff1a; 使用 Servlet&#xff0c;您可以收集来自网页表单的用户输入&#xff0c;呈现来自数据库或者…

根据3d框的八个顶点坐标,求他的中心点,长宽高和yaw值(Python)

要从一个3D框的八个顶点求出它的中心点、长、宽、高和yaw值&#xff0c;首先需要明确框的几何形状和坐标点的顺序。通常这样的框是一个矩形体&#xff08;长方体&#xff09;&#xff0c;但其方向并不一定与坐标轴平行。 以下是一个步骤来解决这个问题&#xff1a; 求中心点&a…

深度学习:cross-attention介绍以及与self-attention的区别

1.Cross-attention vs Self-attention Cross-attention的输入来自不同的序列&#xff0c;Self-attention的输入来自同序列&#xff0c;也就是所谓的输入不同&#xff0c;但是除此之外&#xff0c;基本一致。 具体而言&#xff0c; self-attention输入则是一个单一的嵌入序列。 …

长城公开秘密AI团队,杨继峰带队,明年城市NOH落百城

作者&#xff5c;Amy 编辑&#xff5c;德新 传统车企如何打磨智能化&#xff0c;大模型将为车企带来多少助力&#xff1f; 近日&#xff0c;长城汽车原沙龙品牌智能化中心负责人、智能化研发总监杨继峰以TCAL&#xff08;Technology Center Al Lab&#xff0c;简称「AI Lab」)…

【产品运营】不理想的知识库产品

知识库是将自己平时看到或用到的产品知识进行汇总和整理&#xff0c;这是产品知识体系的初始系统&#xff0c;但很多企业的知识库管理其实并不理想 为什么写这篇文章&#xff1f;有3个原因&#xff1a; 帮前客户做解决方案预研&#xff1b;见过太多失败案例&#xff1b;市面上…

实验4 交换机端口隔离(access模式)

交换机端口隔离&#xff08;access模式&#xff09; 实验目的实验拓扑实验步骤&#xff08;1&#xff09;在未划分vlan前&#xff0c;配置pc1、pc2的地址&#xff0c;如图所示&#xff08;2&#xff09;测试两台pc机的连通性&#xff08;3&#xff09;创建vlan&#xff0c;并验…

虚拟化技术:深入浅出

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

源码编译Qt 5.15.9+msvc2019

官方文档里给出了详细步骤&#xff1a; Building Qt Sources Building Qt 5 from Git (Wiki) 注&#xff1a;本文基于windows11vs2019x64qt5.15.9&#xff0c;不编译Qt WebEngine 归纳总结如下&#xff1a; 准备阶段 Qt for Windows - Requirements 安装python&#xff0c;…

实战 | 服务端开发与计算机网络结合的完美案例

前言 大家好&#xff0c;我是Martin 后端&#xff0c;可以说是仅次于算法岗之外竞争最为激烈的岗位&#xff0c;而其中的服务端开发也是很多人会选择在秋招中投递的一个岗位&#xff0c;我想对于很多人来说&#xff0c;走上服务端开发之路的起点就是一个回声服务器了。 今天…

canal

1 安装配置 1.1 下载 https://github.com/alibaba/canal/releases/download/canal-1.1.6/canal.deployer-1.1.6.tar.gz 1.2 mysql配置binlog # on 时&#xff0c;代表着开启 show VARIABLES like log_bin; 1.3 创建MySQL canal用户 # 创建用户 create user canal% ident…

LabVIEW使用巴特沃兹低通滤波器过滤噪声

LabVIEW使用巴特沃兹低通滤波器过滤噪声 设备采集到的数据往往都有噪声&#xff0c;有时候这些数据要做判断使用&#xff0c;如果不处理往往会影响最终的结果。可以使用动态平滑&#xff0c;或者中值滤波等方法。这里介绍使用巴特沃斯低通滤波&#xff0c;也是非常方便的。 下…

Python算法练习 9.18

leetcode 1657 确定两个字符串是否相似 如果可以使用以下操作从一个字符串得到另一个字符串&#xff0c;则认为两个字符串 接近 &#xff1a; 操作 1&#xff1a;交换任意两个 现有 字符。 例如&#xff0c;abcde -> aecdb操作 2&#xff1a;将一个 现有 字符的每次出现转…

Stable Diffusion 系统教程 | 强大的ControlNet 控制网

2023年的2月13日&#xff0c;一款名叫ControlNet的插件横空出世&#xff0c;AI绘画变得更加可控 ControlNet直译过来很简单&#xff0c;就叫做控制网&#xff0c;开发者是一名华裔&#xff0c;毕业于苏州大学&#xff0c;目前在斯坦福做读博士一年级&#xff0c;大佬大佬&…

typora补丁

背景&#xff1a; 安装typora后试用期30天&#xff0c;打补丁可解决此问题 补丁路径 某盘 链接&#xff1a;https://pan.baidu.com/s/18MLqJHqTL7DXdCoaZvMfhg 提取码&#xff1a;vkgg 1.安装typora软件 2.打补丁 2.1.下载补丁包 解压 2.2.将解压文件复制到安装目录 2.3重…

【集成学习】对已训练好的模型进行投票

在不同的数据预处理情况下训练得到了三个SVM模型&#xff0c;结果都差不多&#xff0c;对这三个模型的分类结果进行投票 1、三个模型的model_path # 最终model的path self.model_path log_path/model_name_model.gz self.time_log log_path/model_name_time_log.csv# 模型1…

Java 华为真题-新学校选址

需求&#xff1a; 为了解新学期学生暴涨的问题,小乐村要建立所新学校&#xff0c;考虑到学生上学安全问题,需要所有学生家到学校的距离最短。 假设学校和所有学生家都走在一条直线之上,请问学校建立在什么位置&#xff0c;能使得到学校到各个学生家的距离和最短。 输入描述&…

【面试经典150 | 数组】轮转数组

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;使用额外的数组方法二&#xff1a;翻转数组 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附…