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

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

news 2026/3/30 1:21:19

一、效果展示

以下主要实现四个动画：

  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

Web3j区块链开发实战：Java开发者的以太坊交互指南

Web3j区块链开发实战&#xff1a;Java开发者的以太坊交互指南 【免费下载链接】web3j Lightweight Java and Android library for integration with Ethereum clients 项目地址: https://gitcode.com/gh_mirrors/we/web3j 1. 核心价值解析&#xff1a;Web3j为何成为Java…...

编程新知 2026/3/30 0:29:42

科学可视化入门：用OptiX 9.0 + SDL2 + OpenGL搭建你的第一个实时渲染窗口

科学可视化实战&#xff1a;从零构建OptiX 9.0实时渲染系统 光线追踪技术正在重塑科学可视化的未来。想象一下&#xff0c;你能够实时操控分子结构中的每一个原子&#xff0c;或者让宇宙射线在指尖流淌——这正是OptiX 9.0与SDL2/OpenGL组合带来的可能性。本文将带你跨越理论到…...

编程新知 2026/3/29 23:51:20

从拖拽到对话:衡石Agentic BI如何重构企业数据分析的交互范式

传统BI的交互困局在商业智能发展史上,2025年或许会被标记为一个转折点。这一年,衡石科技发布的HENGSHI SENSE 6.0 Agentic BI平台,标志着数据分析从"被动工具"正式迈入"主动智能体"时代。过去二十年,"拖拽生成报表"一直被奉为BI工具的黄金标准。…...

编程新知 2026/3/29 23:49:20

万亿级流量的基石：Kafka 核心原理、大厂面试题解析与实战

第一部分&#xff1a;架构师视角——为什么要选 Kafka&#xff1f;在做技术选型时&#xff0c;我们需要明确 Kafka 的定位&#xff1a;它是一个分布式流式处理平台&#xff0c;而不仅仅是一个消息队列。1. Kafka 的核心优势高吞吐量&#xff1a;单机可支撑每秒百万级别的写操作…...

编程新知 2026/3/29 23:35:18

WarcraftHelper：开源工具赋能魔兽争霸3现代硬件适配与性能优化全指南

WarcraftHelper&#xff1a;开源工具赋能魔兽争霸3现代硬件适配与性能优化全指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款…...

编程新知 2026/3/29 23:25:11

解决NextCloud无法挂载SMB/CIFS共享：smbclient缺失的完整安装指南

1. 为什么NextCloud需要smbclient支持 如果你正在使用NextCloud搭建私有云存储&#xff0c;可能会遇到一个常见问题&#xff1a;无法挂载SMB/CIFS共享存储。这个问题通常会在管理后台的"外部存储"设置页面出现错误提示&#xff0c;核心原因就是缺少smbclient组件。 S…...

编程新知 2026/3/29 22:51:01

Cesium交互绘图避坑指南：从CallbackProperty到CustomDataSource的完整流程

Cesium交互绘图避坑指南&#xff1a;从CallbackProperty到CustomDataSource的完整流程 在三维地理信息可视化领域&#xff0c;Cesium凭借其强大的渲染能力和丰富的API接口&#xff0c;已成为开发者构建交互式地图应用的首选工具。然而&#xff0c;当涉及动态绘图功能时&#xf…...

编程新知 2026/3/29 22:44:58

Shell脚本一键部署Kubenetes（k8s）前置环境

1. 服务器环境[rootlocalhost~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core)2. 脚本内容#!/bin/bash#本文针对CentOS7系统#1&#xff09;关闭交换分区swap disable_swap(){echo -e "\e[32m1&#xff09;开始关闭swap\e[0m"#备份fstabsudo cp /e…...

编程新知 2026/3/29 21:48:31

从约束到报告：一份给Synopsys PT新手的保姆级命令行操作指南

从约束到报告&#xff1a;一份给Synopsys PT新手的保姆级命令行操作指南 第一次打开PrimeTime&#xff08;PT&#xff09;时&#xff0c;面对黑底白字的命令行界面和密密麻麻的时序报告&#xff0c;大多数数字IC工程师都会感到手足无措。作为Synopsys的旗舰级静态时序分析&…...

编程新知 2026/3/29 21:20:20

Java Spring Boot 中构造器循环依赖的处理

本文探讨了 Java Spring Boot 循环依赖问题是由于工程中结构设计不当造成的。通过分析示例代码&#xff0c;解释了循环依赖的原因&#xff0c;并提供了有效的解决方案来避免这些问题&#xff0c;重点是避免在结构中创建依赖对象的新例子&#xff0c;以防止无限递归调用 StackOv…...

编程新知 2026/3/29 20:10:01