一、CSS3动画+图片波浪效果

这种方式代码量最小也最简单，算上HTML、CSS一共63行，主要使用 Animation 动画和一张波浪图片大约 7k 也不算大，先上效果图。

1. 效果图

2. 代码

<!DOCTYPE html>
<html><head><style>.water-group{position: relative;height:110px;width: 100%;overflow: hidden;background: linear-gradient(to bottom, #3ec4fc, #0081cc);}.water-group .water{position: absolute;width: 200%;height:100%;background-size: 50% 100%;}.water-group .water1{top:20px;left: -100%;opacity: 0.2;animation: water-right 20s infinite linear;}.water-group .water2{top:30px;left: 0;opacity: 0.3;animation: water-left 30s infinite linear;}.water-group .water3{top:45px;left: -100%;animation: water-right 40s infinite linear;}@keyframes water-right{0% {transform: translateX(0) translateZ(0) scaleY(1)}50% {transform: translateX(25%) translateZ(0) scaleY(0.85)}100% {transform: translateX(50%) translateZ(0) scaleY(1)}}@keyframes water-left{from{transform: translate(0%,0px);}to{transform: translate(-50%,0px);}}</style></head><body><div class="water-group"><div class="water water1" style="background-image: url('wave.png')"></div><div class="water water2" style="background-image: url('wave.png')"></div><div class="water water3" style="background-image: url('wave.png')"></div></div></body>
</html>

3. 原理

① 波浪图：需要一张首尾衔接的边缘透明波浪图，3 层波浪通过opacity属性改变透明度；
② 布局：整个波浪块使用water-group限定relative布局，保证 3 个波浪子元素使用的绝对布局可以限定在其中，且波浪之间有一定高度差凸显层次感；
③ 动画：通过keyframes使波浪图片沿 X 轴无限循环平移实现波动；
④ 要点：
几个关键参数：

波浪块宽度：width: 200%;
波浪图片背景重复：background-size: 50% 100%;
波浪块初始位置：left: -100%;
波浪块平移终点位置：translateX(25%);

对应说明：

波浪块宽度为屏幕的 2 倍，这样每次平移一个屏幕的距离可以做到无缝衔接；
波浪图片原本为一个屏幕大小，变成 2 倍后如果拉伸的话就做不到首尾衔接了，只能是复制了另外一半；
波浪块初始位置跟屏幕右对齐，左边多了一个屏幕的距离，这样可以向右移动不留空白；
波浪块平移终点位置跟屏幕左对齐，由于波浪块是两个相同图片拼接的，所以左对齐和右对齐在屏幕这边是完全相同的，就相当于初始和终止时刻完全一样，这样下一个循环刚好衔接上；

⑤ 示意图：

二、纯CSS3圆盘波浪进度效果

三、纯CSS3涟漪效果

四、Canvas波浪效果

五、SVG+jQuery波浪效果

六、源码下载

https://github.com/zhichaosong/html-wave.git

【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效相关推荐

web服务器与网页表单通信,前端与后端通信的几种方式
只有知道了历史,才能更好的把握现在和未来. 在项目中,通常前端开发主要完成两件事情,一是界面搭建,一是数据交互. 下面是我总结前端与后端交互的几种方式,本文只作简单介绍,不做深入了解. 一.AJAX ...
实现前端页面跳转的几种方式
实现前端页面跳转的几种方式推荐使用 <script language='javascript'> document.location = 'http://mail.qq.com/do ...
使用css3和tween.js二种方式实现照片翻转
照片翻转的二种方式最近在学习使用动画效果,经常去鑫空间翻看大神写得博客,最近看到最新3月份出炉的博客–小tips: 在canvas上实现元素图片镜像翻转动画效果,我就想到自己也有需要展示照片的时候, ...
前端实现跨域的三种方式
前端解决跨域的三种方式: 1.cors跨域(只需要后端配置) header("Access-Control-Allow-Origin:*"); // 允许任何来源 header(& ...
前端页面性能优化的几种方式
前端页面性能优化的几种方式提升页面性能优化的常见方式: 资源压缩合并,减少http请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> ...
Unity快速入门之一 3D基础概念、Camera、Canvas RenderMode的几种方式对比
最近要给公司的小伙伴做Unity入门,针对几个常用的知识进行快速入门介绍. Unity快速入门之一 3D基础概念.Camera.Canvas RenderMode的几种方式对比_翕翕堂 Unity快速 ...
css3波浪动画特效
css3波浪动画特效可根据需求添加修改波浪线和背景颜色全部代码如下 <!doctype html> <html> <head> <meta charset ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html 边框立体效果,用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

【前端】CSS3、Canvas、SVG等5种方式实现水波纹波浪动画特效

目录