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

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

news 2026/2/9 11:15:37

一、效果展示

以下主要实现四个动画：

  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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/2/9 2:15:44

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2026/1/28 9:44:45