SVG是一种矢量图格式，是 Scalable Vector Graphics 三个单词的首字母缩写。当你需要开发web动画时，这里可以给你提供一个清晰的思路。

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

这种轮盘式可收起的按钮大家应该都见过的吧，对于一些平时使用频率不高的按钮组，我们就可以用这种轮盘按钮来处理，平时收缩起来只展示一个主按钮，点击主按钮之后才会将子按钮围绕主按钮显示出来

一个很炫酷的发光按钮特效，鼠标悬停时，按钮呈现旋转动画发光的效果，这样的动画效果可以显著提升用户体验和视觉吸引力。

实现一个动态按钮组，并且将视频作为背景 不知道各位是否知道wallenpaper壁纸引擎，其中里面可以将我们自己的html导入当成我们的电脑壁纸，所以，嘿嘿嘿，懂得都懂。大家之后可以慢慢完善

今天来实现一个水球进度加载动画效果，整体是一个球形容器，球顶不断有水滴滴落，随着水滴滴落，底部水位不断上升，水面上涨的同时伴随着波动的动画。

学习这篇文章，我们将学习如何去使用CSS的动画属性和Vue的内置去实现动画的效果，创建出丰富多彩的动态效果，提升用户体验！且能去学习良好的编程规范，使我们的代码更加高效和易于维护！

随着threejs基础学习阶段的结束，本文使用基于Vue3 + vite + threejs实现3D网页demo，希望各位大佬能通过浏览本文有所收获

1. 分享 最近看到一个很酷的金属球效果： 点击它的时候会产生涟漪，效果如下： 体验地址：https://gnufault.github.io/ripple-sphere/ 移动端也可以，但因为部署在