一、效果展示

以下主要实现四个动画：

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

二、实现思路

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

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

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

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

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

三、参考代码

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

# css # 前端 # 微信小程序 # 个人开发
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区