关键词：
阅读目录
阐述
这是一款使用CSS3 animation 动画和 png 图片制作的 css3 线条波浪动画效果。
该特效中，使用了 3 张波浪线条的 png 图片，以及少量的 CSS 代码，制作出逼真的线条波浪动画效果。
HTML结构
该 css3 线条波浪动画效果的HTML结构如下：
<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>
CSS 样式
然后通过下面的CSS代码来制作线条波浪动画效果。
@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, #86377b 20%, #27273c 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% 100px;
.waveAnimation .waveTop
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
.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;
预览
css3动画：波浪效果
实现效果如图所示：首先得准备三张图，一张是浅黄色的背景图loading_bg.png，一张是深红色的图loading.png，最后一张为bolang.png。css代码body{background:#ffe894;}.loading_bg{width:113px;height:111px;background:url(loading_bg.png)no-repeatlefttop;margin: 查看详情
svg实现波浪效果(代码片段)
SVG实现波浪效果svgpath：C贝塞尔曲线绘制波浪形状 A绘制圆弧形svganimate：制作波浪动画，为了波浪动画效果自然，设置values关键点 attributeName：变化属性名 dur：动画时... 查看详情
css3鼠标滑过实现动画线条边框(代码片段)
...看到一些动画效果，今天我们做一个通过css3鼠标滑过实现动画线条边框，下面一起看看吧。实现效果完整源码<template><divclass="parentBox"><divclass="contantBox"><ulclass="shelfBox"><li>... 查看详情
svg波浪动画(代码片段)
今天来试试用svg+css3制作波浪动画下图是我制作出的效果还不错吧在制作波浪前，首先我们要画波浪啊，至于画波浪，如果你想直接通过计算贝塞尔曲线绘制出波浪。。。好吧，那我也不拦着你我就直接用ai的钢笔工具画了为了... 查看详情
css3波纹特效h5实现动态波浪
css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok，使得translateX产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对... 查看详情
shader动画之旗子/水纹波浪！cocoscreator!(代码片段)
...选择上面创建的材质。预览就能看到这张图片动起来了。实现原理为什么选择平铺模式可以实现这个效果呢？简单的Sprite通常是4个顶点。而通过Cocos源码中发现，S 查看详情
玩转svg线条动画(代码片段)
在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长... 查看详情
万彩动画大师教程|如何实现对象边框线条的强调动画效果
...有【边框线条】的动画效果，然后点击【确定】，就可以实现对象边框线条的强调动画效果，如下图所示： 查看详情
深入css3帧动画实现ps时间轴动画效果steps()（前端网备份）(代码片段)
在应用CSS3渐变/动画时，有个控制时间的属性<timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的steps()函数。steps()第一个参数number为指定的间隔数（必须是正整数），即把动画分为n步阶段... 查看详情
一起talkandroid吧（第五百一十七回：绘制波浪效果)(代码片段)
文章目录整体思路实现方法示例代码各位看官们大家好，上一回中咱们说的例子是"绘制压力扩散图",这一回中咱们说的例子是"绘制波浪效果"。闲话休提，言归正转，让我们一起TalkAndroid吧！整体思路... 查看详情
使用纯css实现波浪效果
有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设... 查看详情
一起talkandroid吧（第五百一十九回：波浪上升动画)(代码片段)
文章目录整体思路实现方法示例代码各位看官们大家好，上一回中咱们说的例子是"绘制波浪效果",这一回中咱们说的例子是"波浪上升动画"。闲话休提，言归正转，让我们一起TalkAndroid吧！整体思路我... 查看详情
css3设置线条延伸动画,怎么从右向左延伸
transition效果默认width变化时，变化方向是自右向左变化。现在，想做一个自右向左的变化效果，有哪位高手懂,js实现也行参考技术A一个简单的方法，本质还是从左到右，但是添加一条属性，旋转180度 查看详情
jetpackcompose实现波浪加载效果(代码片段)
最近用Compose实现了一个波浪效果的进度加载，如上图所示。API在设计上符合Compose的编码风格，使用非常简便。1.使用方式在root的build.gradle中引入jitpack，allprojects repositories ... mavenurl'https://jitpack.io' 在modu 查看详情
玩转css3的3d动画效果(代码片段)
效果展示基础知识transform-style：启用3D模式要利用CSS3实现3D的效果，最主要的就是借助 transform-style 属性。transform-style 只有两个值可以选择：//语法：transform-style:flat|preserve-3d;transform-style:flat;//默认，子元 查看详情
css3实现悬停波浪效果
<ahref=""class="a1">商家入口</a>.a1{ background-color:orange; display:inline-block; width:100px; height:35px; text-align:center; text-decoration:none; //设置好元素的定位和边界 overflow:hi 查看详情
css3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作，效果流畅弹性十足效果展示 http://hovertree.com/texiao/css3/32/源码下载：http://hovertree.com/h/bjaf/fo1jlmhi.htm 效果图如下：代码如下：<!doctypehtml><html><head><metacharset="ut 查看详情
用css3快速实现呼吸灯效果-案例(代码片段)
呼吸灯效果 核心@keyframesbreath fromopacity:0.1;/*动画开始时的不透明度*/ 50%opacity:1;/*动画50%时的不透明度*/ toopacity:0.1;/*动画结束时的不透明度*/源码-在线展示<!DOCTYPEhtml><html> <head> <metacharset=& 查看详情