相信大家波浪动画都见过不少，很多是通过纯css的boder-radius或者clip去实现方式众多，但我们本次用svg去画波浪来讲解其动画的两种方案~

在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际…

效果（源码在最后）： 这个效果跟水波加载动画 html+css是异曲同工之妙的。效果不难实现，但是这个‘偷天换日’的用法是值得学习的。 实现： 1. 定义标签，.container是底层盒子也就是电池

背景 👏最近在工作中遇到一个水球进度条，用svg绘制几个波浪叠加动画写起来超简单，css3动画+svg实现水球进度条~

今天继续推荐提高我们摸鱼时间的几个神器，相信我，你会爱上他们的。 1. Neumorphism 地址：https://neumorphism.io/ 这个网站为 section 或 div 生成对应U

之前看到coco的这样一篇文章： 纯 CSS 实现波浪效果！，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。 这次尝试一下使用 CSS 渐变来实现这样一

图中的波浪线 L 就是我们要的，它是沿着上下两排相切圆的切线画出来的，只要画出 A 段然后重复，就可以得到我们想要的波浪效果。 首先要解决怎么画圆的问题，这里就要用到 css3 radial-gradient 属性，不了解这个属性的可以看一下mdn或者10个demo示例学会CS…

最近想做一个波浪滚动的背景，查询资料后发现使用 svg 可以做。自己动手实践了下，效果如下： 首先看到这些波浪是由一些曲线来绘制成的，使用 css 可以通过 border-radius 设置各种角度来实现。但是想想也挺麻烦的，svg 中的 path 可以满足我们的需求。 也就是…