css+js实现水波状进度条动画

最新推荐文章于 2024-10-09 17:36:40 发布

guanguan0_0

最新推荐文章于 2024-10-09 17:36:40 发布

阅读量3k

点赞数 1

分类专栏： JS、jQuery 文章标签： css水波纹动画 css进度条动画 css水波进度

本文链接：https://blog.csdn.net/guanguan0_0/article/details/110955552

版权

进度条在前端很常见，效果也多种多样，慢慢积累。

这次介绍一个水波状的进度动画，如图

主要是使用js和css来处理，这里需要计算一个值，因为是匀速增加百分比，所以我们需要对照总耗时来计算对应的增长速度，这里是我的配置：

总时间：30s，也就是在样式的动画效果中的播放时间设置为30s

总进度：100%

增长间隙时间：150ms （经过测试，如果设置100ms感觉变化太快，看不清）

增长速度：0.48% 。30/0.15 = 100/0.5 但是为了让数据变化看起来更加真实，所以想要显示两位小数，故取用0.48

具体需求可以根据公式修改，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style>
      @keyframes spin {
        50% {
          transform: translate(-50%, -101%) rotate(500deg);
        }
        100% {