css3波浪动画特效可根据需求添加修改波浪线和背景颜色

全部代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>波浪动画特效</title><style>
@keyframes move_wave {0% {transform: translateX(0) translateZ(0) scaleY(1)}50% {transform: translateX(-25%) translateZ(0) scaleY(0.55)}100% {transform: translateX(-50%) translateZ(0) scaleY(1)}
}
.waveWrapper {overflow: hidden;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
}
.waveWrapperInner {position: absolute;width: 100%;overflow: hidden;height: 100%;bottom: -1px;background-image: linear-gradient(to top, #2979ff 20%, #2979ff 80%);
}
.bgTop {z-index: 15;opacity: 0.5;
}
.bgMiddle {z-index: 10;opacity: 0.75;
}
.bgBottom {z-index: 5;
}
.wave {position: absolute;left: 0;width: 200%;height: 100%;background-repeat: repeat no-repeat;background-position: 0 bottom;transform-origin: center bottom;
}
.waveTop {background-size: 50% 90px;
}
.waveAnimation .waveTop {animation: move_wave 17s linear infinite;
}
.waveMiddle {background-size: 50% 120px;
}
.waveAnimation .waveMiddle {animation: move_wave 10s linear infinite;
}
.waveBottom {background-size: 50% 100px;
}
.waveAnimation .waveBottom {animation: move_wave 15s linear infinite;
}
</style></head>
<body><div class="waveWrapper waveAnimation"><div class="waveWrapperInner bgTop"><div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div></div><div class="waveWrapperInner bgMiddle"><div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div></div><div class="waveWrapperInner bgBottom"><div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div></div>
</div></body>
</html>

用到的三张图片素材如下

效果图

css3波浪动画特效相关推荐

html波浪动态效果,HTML5+CSS3逼真水波浪动画特效
HTML5+CSS3逼真水波浪动画特效 @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 5 ...
css3 html5动画特效
转载自:http://www.html5tricks.com/8-html5-pure-css3-animation.html 8个超震撼的HTML5和纯CSS3动画源码 150 人浏览发表回复 H ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
CSS3: 常用动画特效及4个最流行的动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
8种CSS3按钮动画特效【附源码】
这8款CSS3按钮动画特效.在该特效中,提供了8种按钮动画效果.每种动画在鼠标悬停到按钮上面的时候,都会触发按钮动画. 动画效果截图: 使用方法 HTML结构最简单的按钮HTML结构如下. < ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰代码过长需要文档版源码来我的前端群581549454,已上传到 ...
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
纸飞机html,Flyaway.css-炫酷纯CSS3纸飞机动画特效
Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaway.cs ...

css3波浪动画特效

css3波浪动画特效可根据需求添加修改波浪线和背景颜色

用到的三张图片素材如下

效果图

css3波浪动画特效相关推荐

最新文章

热门文章

css3波浪动画特效

css3波浪动画特效 可根据需求添加修改波浪线和背景颜色

用到的三张图片素材如下

效果图

css3波浪动画特效相关推荐

最新文章

热门文章

css3波浪动画特效可根据需求添加修改波浪线和背景颜色