目录
一、CSS3动画+图片波浪效果1. 效果图2. 代码3. 原理二、纯CSS3圆盘波浪进度效果三、纯CSS3涟漪效果四、Canvas波浪效果五、SVG+jQuery波浪效果六、源码下载一、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波浪效果
六、源码下载
/zhichaosong/html-wave.git