今天小编跟大家讲解下有关纯CSS实现波浪移动效果的示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS实现波浪移动效果的示例 的相关资料，希望小伙伴们看了有所帮助。
在某些页面上常常看到波浪的效果 虽然只有装饰的作用 但是却让页面看上去更生动了 同时某些情况下也能起到进度条的作用 而波浪的形式却比普通进度条更美观有趣。
如果想要实现波浪的效果 作者想到的第一个方法是通过 canvas 绘制波浪 然后用帧动画让波浪运动起来。这种方式实现的波浪效果应该是最好的 能够实现很多细节 比如控制波峰的高度、改变波浪的数量、根据前一个波浪的高度计算后一个波浪的高度等等。
但是往往需求并不会这么复杂 产品经理和设计想要的只是一个看上去还比较美观的波浪效果而已。如果用 canvas 去做 就实在是大材小用了 耗时耗力。所以这种情况下 就可以尝试使用 css 来完成这个小需求。
分析波浪效果
上面是作者完成的波浪效果的其中一种（不会做 gif 就用多张图片拼贴在一起代替吧） 它有两个波峰 这两个波峰动起来时 会有一种向右推进的效果。我们先一个一个来看 如果要实现一个波峰 我们应该怎么做
波峰具有弧度 在 css 中能够实现弧度效果的是border-raduis这个属性；而对于向右推进的效果 单个来看的话 其实可以理解为是旋转动画 我们可以通过animation来实现。
// html<div class="wave"></div>// style.wave { width: 300px; height: 300px; border-raduis: 50%; background: blue;}上面代码中的.wave在页面上的显示效果是一个圆形。虽然还没有添加动画 但是我们已经可以预想到 即使旋转起来 我们视觉上看来并没有在运动。这要怎么解决呢 其实很简单 只要让每一个角的弧度都不同就行了。同时 让宽高不同 可以使绘制出来的效果更好。
.wave { width: 250px; height: 300px; border-top-right-radius: 150px; border-top-left-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 140px; background: #adcbfe;}然后通过动画使这个不规则的形状动起来。
.wave { width: 250px; height: 300px; border-top-right-radius: 150px; border-top-left-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 140px; background: #adcbfe; animation: wave 4s linear infinite;[email protected] wave { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}关于 css 动画的使用 可以参考之前的一篇文章：
纯CSS实现轮播图效果
到这里 一个波浪的实现就完成了。第二个波浪的实现步骤和第一个是相同的 但是可以对width height border-raduis animation 这些属性进行修改 使两个波浪的运动节奏不同 有快有慢有高有低 这样波浪的效果就会更真实。
想要看源码的小伙伴可以戳下面这个链接：
demo on github
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
