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

本文介绍: 本文主要介绍使用 CSS 实现动态水位球效果（纯 CSS3 样式）。其实在数据可视化应用中，水球图也是一种常见的数据展示形式。关于实现个性化水球，在相当长的一段时间并没有找到比较简洁的实现方式，因此在以往的可视化作品中，大多采用ECh ar ts 插件，当然还有其他更多的实现方式。如：CSS + jQue ry 实现、jQue ry 实现、Vue + 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);
}


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

.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%;
}

<!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>