CSS实现动态水位球效果（纯CSS3样式）

文章目录

前言
正文
- 需求分析
- 需求调研
- 水球图设计
- - 绘制水球容器
  - 绘制水
  - 绘制水纹
  - 定制水位
- 水球图使用
- 效果展示
小结

前言

最近接到了某项目首屏业务的开发，交互给了设计原型图后，大概浏览了一下首屏界面。突然脑海里浮现出一个大大的疑问，竟然出现了带有水位比例浮动球的效果。

此刻，进修者结合当前项目用到的技术和技术版本，已确认这个水位球效果组件中是没有的。那么就要考虑其他途径来完成该业务需求了！

进修者在实现该水球图的时候，做了很多功课。在网上搜遍了相关的关键词，发现很多都是大同小异。进修者根据文章内容操作下来，发现基本没有能正常实现功能的，还需要调试。估计网上很多内容是从其他网站拷贝过来，创作者随便改了改就发布了。调试好后，发现很多还不符合业务，不过经过大量的尝试，终于确定了一套符合自己业务的水球图。

下面给大家分享一下，希望可以帮到需要的伙伴们！

正文

在进入今天的内容分享之前，读者伙伴会不会有疑问，进修者是做前端还是后端的？这里告诉大家一下，进修者不是什么大牛，也不在一线大厂，就是一个普普通通的开发人员。和你们很多人差不多，就是一个全栈开发人员（全栈意味着全干，无论什么技术，什么工作，只要需要都能干；基本用到的技术都会但不很精通，项目中的疑难杂症也都能解决）。

好了，不啰嗦了，耽误大家不少时间，开始进入正题！

在这里插入图片描述

需求分析

接到交互原型图后，我们需要了解业务场景以及需要的技术点。根据业务分析如下：

交互原型图：某项目首屏开发设计
界面展现：饼图、折线图、柱状图、含有水位比例的水球图等；
技术支撑：从界面展现，可以确定首屏为数据可视化的应用业务场景。使用市面用的最多的可视化组件 ECharts，并确认项目中的 ECharts 版本。使用的 ECharts 版本不支持水球图，可以使用其他技术来实现。

需求调研

在可视化应用中，水球图也是一种常见的数据展示形式。其实关于实现个性化水球，在相当长的一段时间并没有找到比较简洁的实现方式，因此在以往的可视化作品中，大多采用 ECharts 插件（Liquid Fill Chart）来实现。

水球图

调研总结：水球图有很多的技术实现，譬如：CSS + jQuery 实现、jQuery 实现、Vue + CSS 等、纯 CSS 实现等。然后根据自己项目技术（项目前端技术比较落后，没有使用 Vue / Angular 等框架），确定使用纯 CSS 来实现。

水球图设计

绘制水球容器

使用CSS样式实现一个装水的容器，具体代码如下所示：

/* 水位球样式 Create by trainer 2023/07/23 */
.water-circle {
    position: relative;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    border: 3px solid rgb(246, 247, 248);
    box-shadow: 0 0 0 3px rgb(41, 134, 196);
}

绘制水

使用CSS样式绘制水样式，具体代码如下所示：


.water {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(23, 106, 201);
    border-radius: 50%;
    overflow: hidden;
}

绘制水纹

通过赛贝尔曲线 + animation + translate 旋转来实现，CSS 样式绘制水纹动态效果，具体代码如下所示：

.water::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 40%;
    background-color: rgb(240, 228, 228);
    animation: real 5s linear infinite;
}

@keyframes real {
    0% {
        transform: translate(-50%, -65%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -65%) rotate(360deg);
    }
}
/* 水位高度top: 35% ~ -65% */
.water::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 42%;
    background-color: rgb(240, 228, 228, 0.2);
    animation: virtual 7s linear infinite;
}

@keyframes virtual {
    0% {
        transform: translate(-50%, -60%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -60%) rotate(360deg);
    }
}

定制水位

可以根据需要定制水球图水位，可以参考下面的代码来设置：


/* 定制浮动水位样式 */
.water-level-10::after,.water-level-10::before {
    top: 30%;
}
.water-level-20::after,.water-level-20::before {
    top: 20%;
}

水球图使用

在 index.html 中引入水球图所有样式，并编写水球占位元素，部分代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  加载样式 -->
    <link rel="stylesheet" type="text/css" href="css/index-waterbubble.css" />
    <title>首屏界面</title>
</head>
<body>
	<!-- 部分代码 -->
    <div class="water-circle" id="reporterRatio">
   		<div class="water water-level-10"></div>
	</div>
</body>
</html>

效果展示

下面是业务展现效果，还需要继续完善，在水位球上面加上文字的比例数据就算完成了。

水球图

小结

通过学习上面的内容，进修者相信读者已经学会了如何使用 CSS 技术来实现动态水位球的效果。

总体来说，市面上的水球图插件有很多，使用的技术也不尽相同，具体还要结合项目来确定采取何种方式实现其效果。文章中设计的水位球效果，读者可以参考，如果不合适，可以在网上搜索相关资料。来设计一套符合自己项目业务需求的水球图。今天分享内容就结束了，希望可以帮到大家！

温情提示：学习不是一蹴而就的，希望大家不忘初心，继续前行！

感谢您读完了进修者的内容分享，欢迎留言区一起聊聊天，聊聊关于您对“CSS实现动态水位球效果”有什么更好的想法，都可以随时叨扰！

我是进修者，期待与您肩并肩，一起进化成长！
在这里插入图片描述