当前位置： 首页 > news >正文

CSS动画——实现波浪摇摆效果...

news 2025/9/11 21:34:06

一、效果展示

以下主要实现四个动画：

  1. 元素上下摇摆动画
  2. 波浪上下摇摆动画
  3. 气泡上升及消失动画
  4. 连续气泡右飘动画
    在这里插入图片描述

二、实现思路

这里主要讲一下波浪上下摇摆动画和连续气泡右飘动画的实现思路

这里拿一张波浪图来举例解释实现波浪动画的思路：

波浪的摇摆实际上是通过波浪图的左右移动实现的，因此我们只需写一个实现波浪图从右(左)到左(右)移动的动画即可，但是在实现循环移动的动画中会存在一个问题，波浪图向左移动后，将移出屏幕边界，并且右侧会空出来，因此我们在盒子内放两张相同的波浪图，一张初始位置在屏幕内，一张在屏幕右侧，当第一张向左移动时，第二张紧跟着一起移动实现弥补原本的空出来的位置，这样就可以实现波浪上下摇摆的动画效果了。

连续气泡右飘动画实现原理：

先写一个气泡水平方向向右移动、垂直方向先下后上、气泡宽高从0变大、透明度在50%时从1变为0的动画，再复制5个相同的气泡，给每个气泡不同的动画延时animation-delay，但是每个气泡之间的延时时长必须相同。

三、参考代码

https://github.com/WuJianR/animation-pratice

相关文章：

CSS动画——实现波浪摇摆效果...

一、效果展示 以下主要实现四个动画： 元素上下摇摆动画波浪上下摇摆动画气泡上升及消失动画连续气泡右飘动画 二、实现思路 这里主要讲一下波浪上下摇摆动画和连续气泡右飘动画的实现思路 这里拿一张波浪图来举例解释实现波浪动画的思路： 波浪的摇…...

编程日记 2023/7/31 14:04:25

【MyBatis学习】Spring Boot(SSM)单元测试,不用打包就可以测试我们的项目了,判断程序是否满足需求变得如此简单 ? ? ?

前言: 大家好,我是良辰丫,在上一篇文章中我们学习了MyBatis简单的查询操作,今天来介绍一下Spring Boot(SSM)的一种单元测试,有人可能会感到疑惑,框架里面还有这玩意?什么东东呀,框架里面是没有这的,但是我们简单的学习一下单元测试,可以帮助我们自己测试代码,学习单元测试可以…...

编程日记 2023/7/31 14:03:23

JavaScript 类

本文内容学习于：后盾人 (houdunren.com) 1.可以使用类声明和赋值表达式定义类，推荐使用类声明来定义类 //类声明 class User {} console.log(new User()); //赋值表达式定义类 let Article class {}; console.log(new Article()); //类方法间不需要逗号…...

编程日记 2023/7/31 14:02:21

SpringBoot的static静态资源访问、参数配置、代码自定义访问规则

目录 1. 静态资源1.1 默认静态资源1.2 Controller高优先级1.3 修改静态资源的URL根路径1.4 修改静态资源的目录1.5 访问webjars依赖包的静态资源1.6 静态资源的关闭1.7 静态资源在浏览器的缓存1.8 静态资源实战1.9 通过代码自定义静态资源访问规则 1. 静态资源 查看源码如下&a…...

编程日记 2023/7/31 14:01:20

IO进、线程——线程（线程的创建、线程的退出、线程的回收、线程的分离和多线程并发编程）

线程 并发执行的轻量级进程 进程是资源分配的最小单位，线程是任务调度的最小单位 线程是进程的一部分，是任务调度的最小单位。一个进程可以包含多个线程，这些线程可以并发执行，共享进程的资源，但每个线程都有自己的…...

编程日记 2023/7/31 14:00:18

neo4j教程-Cypher操作

Cypher基础操作 Cypher是图形存储数据库Neo4j的查询语言，Cypher是通过模式匹配Neo4j数据库中的节点和关系，从而对数据库Neo4j中的节点和关系进行一系列的相关操作。 下面，通过一张表来介绍一下常用的Neo4j操作命令及相关说明，具…...

编程日记 2023/7/31 13:59:17

秋招算法备战第31天 | 贪心算法理论基础、455.分发饼干、376. 摆动序列、53. 最大子序和

贪心算法理论基础 贪心算法并没有固定的套路，唯一的难点就是如何通过局部最优，推出整体最优。如何验证可不可以用贪心算法呢？最好用的策略就是举反例，如果想不到反例，那么就试一试贪心吧。刷题或者面试的时候&#xf…...

编程日记 2023/7/31 13:58:16

页面生成图片或PDF node-egg

没有特别的幸运，那么就特别的努力！！！ 中间件：页面生成图片 node-egg 涉及到技术node egg Puppeteer 解决文书智能生成多样化先看效果环境准备初始化项目 目录结构核心代码 完整代码https://gitee.com/hammer1010_ad…...

编程日记 2023/7/31 13:57:15

go常用知识点

go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct 打包一个目录下的多个包时 go build ./… go install ./… 测试时，命令行：go test . //目录下所有单元测试都会执行 go test -v 目录 //测试覆盖率 go test -cover //使用cove…...

编程日记 2023/7/31 13:56:14

ComPDFKit PDF SDK（支持Web、Android、IOS、Windows、Server、API、跨平台）

1. SDK、API是什么？ SDK是软件开发工具包的缩写，指的是一组用于开发软件应用的工具、库和文档。SDK包含一系列的函数、类和方法，开发人员可以使用这些工具和资源来开发、测试和部署应用程序。SDK可以提供各种功能和技术支持，如图…...

编程日记 2023/7/31 13:55:10

使用maven容器打包java项目

docker run --rm -v /path/to/your/microservice:/app -w /app maven:latest mvn clean package 解释一下上面的命令： docker run：运行Docker容器。--rm：在容器运行结束后自动删除容器，避免堆积未使用的容器。-v /path/to/you…...

编程日记 2023/7/31 13:54:08

超前端相关的学习网站和一些靠谱的小工具

CSS相关 1. CSS Battle - 在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12个级别，需要你用 HTML和 CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜&am…...

编程日记 2023/7/31 13:53:07

uniapp跳转到外部链接

// 一、先配置页面 {"path": "pages/webview/webview","style": {"navigationBarTitleText": ""} } // 二、编写页面 <template><web-view :src"src" /> </template><script> export def…...

编程日记 2023/7/31 13:52:05

初识DBT以及搭建第一个DBT工程

DBT是什么&#xff1a; 按照官方的说法&#xff0c;DBT 是一个数据转换流编排工具。个人理解就是&#xff0c;DBT是帮你编排SQL用的&#xff0c;你可以按照DBT的结构&#xff0c;构建好一个SQL的pipeline&#xff0c;然后让DBT帮你执行这个pipeline。我这里说的SQL pipeline的意…...

编程日记 2023/7/31 13:51:03

Python基于PyTorch实现卷积神经网络回归模型(CNN回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 卷积神经网络&#xff0c;简称为卷积网络&#xff0c;与普通神经网络的区别是它的卷积层内的神经元只覆…...

编程日记 2023/7/31 13:50:01

（AcWing）集合-Nim游戏

给定 n 堆石子以及一个由 k 个不同正整数构成的数字集合 S。 现在有两位玩家轮流操作&#xff0c;每次操作可以从任意一堆石子中拿取石子&#xff0c;每次拿取的石子数量必须包含于集合 S&#xff0c;最后无法进行操作的人视为失败。 问如果两人都采用最优策略&#xff0c;先…...

编程日记 2023/7/31 13:49:00

ConcurrentHashMap源码详解

本文已收录于专栏 《Java》 目录 概念说明数据结构线程安全HashMap示例运行结果ConcurrentHashMap示例运行结果 涉及技术Synchronized概念特性 CAS(Compare And Swap)概念原理代码演示没有使用CAS的代码运行结果使用CAS的代码运行结果 总结提升 概念说明 ConcurrentHashMap是Ja…...

编程日记 2023/7/31 13:47:55

医疗流程自动化盛行，RPA成为医疗保健行业的重点应用技术

随着我们进入新的科技纪元&#xff0c;机器人流程自动化&#xff08;RPA&#xff09;正快速地改变着我们的游戏规则。简单来说&#xff0c;RPA 就是模仿人类与电子系统的互动&#xff0c;自动化执行重复性的任务和操作序列。 医疗保健领域中&#xff0c;RPA 的应用具备巨大的潜…...

编程日记 2023/7/31 13:46:53

Java 版 spring cloud + spring boot 工程系统管理 工程项目管理系统源码 工程项目各模块及其功能点清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

编程日记 2023/7/31 13:45:52

java重试机制实现方案

本文内容是目前团队内小磊同学对重试机制实现方案的梳理总结。 从为什么需要重试的背景开始&#xff0c;到重试的场景&#xff0c;大致的一些设计思路&#xff0c;最后通过两个成熟的retry组件进行案例讲解&#xff0c;理论实战。 背景 重试是系统提高容错能力的一种手段。在一…...

编程日记 2023/7/31 13:44:50

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/9/11 16:48:26

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/7/20 11:15:04

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/8/6 0:07:38

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/7/25 14:20:29

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2025/9/3 20:37:55

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2025/9/2 16:50:21

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/9/10 19:42:09

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

编程新知 2025/9/9 10:19:08

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2025/7/6 21:00:59