css动画水球图

由于echarts水球图动画会导致ios卡顿,所以纯css模拟

展示效果

组件

<template>
  <div class="water-box">
    <div class="water">
      <div class="progress" :style="{ '--newProgress': newProgress + '%' }"></div>
      <div class="num">{
  
  { parseFloat(text).toFixed(2) + '%' }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Water',
  props: {
    progress: {
      type: Number,
      default: 0
    },
    text: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      newProgress: 0
    }
  },
  mounted() {
    this.newProgress = this.progress > 100 ? 100 : this.progress
  },
  watch: {
    progress(val) {
      this.newProgress = val > 100 ? 100 : val
    }
  }
}
</script>

<style scoped lang="scss">
.water-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #4c5259;
  background: linear-gradient(180deg, #171c25 0%, #313741 49.79%, #171c25 100%);
  box-shadow: 0 2px 10px 0 rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  .water {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 87.5px;
    height: 87.5px;
    border-radius: 50%;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #313741;
      background: linear-gradient(135deg, #04bdf8 30.52%, #01e7af 100%, #01e4b4 100%);
      border-radius: 50%;
      top: 0;
    }
    .progress {
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      line-height: 125px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      z-index: 1;
      overflow: hidden;
      &::before,
      &::after {
        content: '';
        position: absolute;
        left: -50%;
        width: 200px;
        height: 200px;
      }
      &::before {
        background-color: #313741;
        opacity: 0.8;
        border-radius: 40% 30%;
        animation: rotate1 10s linear infinite;
      }
      &::after {
        background-color: #313741;
        opacity: 0.7;
        border-radius: 42% 40%;
        animation: rotate2 10s linear infinite;
      }
    }
    @keyframes rotate1 {
      0% {
        transform: rotate(0deg);
        bottom: var(--newProgress); /*控制进度*/
      }
      100% {
        transform: rotate(360deg);
        bottom: var(--newProgress);
      }
    }
    @keyframes rotate2 {
      0% {
        transform: rotate(45deg);
        bottom: var(--newProgress);
      }
      100% {
        transform: rotate(360deg);
        bottom: var(--newProgress);
      }
    }
    .num {
      z-index: 2;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
  }
}
</style>

引用

<water
    :progress="66"
    :text="66"
/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/957600.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于 Spring Boot 和 Vue.js 的全栈购物平台开发实践

在现代 Web 开发中&#xff0c;前后端分离的架构已经成为主流。本文将分享如何使用 Spring Boot 和 Vue.js构建一个全栈购物平台&#xff0c;涵盖从后端 API 开发到前端页面实现的完整流程。 1. 技术栈介绍 后端技术栈 JDK 1.8&#xff1a;稳定且广泛使用的 Java 版本。 Spring…

nginx离线安装部署详解(附一键启动 环境变量)

学习nginx的过程中 看了许多帖子 但是都没有全套的部署 所以想自己写一篇帖子 正好也可以给后续想要学习nginx的人参考一下 当时在学习的时候总是在想 为什么要学习离线安装 这玩意不是一个dnf命令不就完事了吗 在后续的学习中才发现 原来在实际环境中许多机器都是离线…

论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(一)

Understanding Diffusion Models: A Unified Perspective&#xff08;一&#xff09; 文章概括引言&#xff1a;生成模型背景&#xff1a;ELBO、VAE 和分层 VAE证据下界&#xff08;Evidence Lower Bound&#xff09;变分自编码器 &#xff08;Variational Autoencoders&#x…

Biotin sulfo-N-hydroxysuccinimide ester ;生物素磺基-N-羟基琥珀酰亚胺酯;生物素衍生物;190598-55-1

一、生物素及其衍生物的概述 生物素衍生物是指在生物素&#xff08;Vitamin H或B7&#xff09;分子基础上进行化学修饰得到的衍生化合物。这些衍生化合物在生物医学研究、临床诊断和药物开发等领域有着广泛的应用。 生物素&#xff08;Biotin&#xff09;是一种水溶性维生素&a…

Freemarker模板引擎技术

【问题】当渲染文章数据时&#xff0c;由于文章的数据很多&#xff0c;直接去查询文章内容表的话&#xff0c;效率比较低。 【解决】使用freemarker将文章的内容通过模板技术生成静态的html文件存储到minio中&#xff0c;这样用户就只需要拿着minio的url去minio里获取静态页面即…

Python在多个Excel文件中找出缺失数据行数多的文件

本文介绍基于Python语言&#xff0c;针对一个文件夹下大量的Excel表格文件&#xff0c;基于其中每一个文件内、某一列数据的特征&#xff0c;对其加以筛选&#xff0c;并将符合要求与不符合要求的文件分别复制到另外两个新的文件夹中的方法。 首先&#xff0c;我们来明确一下本…

Linux 内核中的 InfiniBand 核心模块:drivers/infiniband/core/device.c 分析

InfiniBand 是一种高性能、低延迟的网络互连技术,广泛应用于高性能计算(HPC)、数据中心和云计算等领域。Linux 内核中的 InfiniBand 子系统提供了对 InfiniBand 设备的支持,而 drivers/infiniband/core/device.c 文件则是 InfiniBand 核心模块的重要组成部分。本文将对 dev…

leetcode-不同路径问题

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 看见题目…

【网络协议】【http】【https】RSA+AES-TLS1.2

【网络协议】【http】【https】RSAAES-TLS1.2 https并不是一个协议 而是在传输层之间添加了SSL/TLS协议 TLS 协议用于应用层协议&#xff08;如 HTTP&#xff09;和传输层&#xff08;如 TCP&#xff09;之间&#xff0c;增加了一层安全性来解决 HTTP 存在的问题&#xff0c;H…

【16届蓝桥杯寒假刷题营】第1期DAY5

5.依依的询问最小值 - 蓝桥云课 问题描述 依依有个长度为 n 的序列 a&#xff0c;下标从 1 开始。 她有 m 次查询操作&#xff0c;每次她会查询下标区间在 [li​,ri​] 的 a 中元素和。她想知道你可以重新排序序列 a&#xff0c;使得这 m 次查询的总和最小。 求你求出 m 次…

Ext2 文件系统:数字世界的基石,深度解码超时空存储魔法

本篇博主将带大家深入底层探秘系统是如何与磁盘进行相互交流的&#xff0c;配合精美配图&#xff0c;细节讲解来带大家深入探究&#xff08;注&#xff1a;本篇文章建议了解磁盘内部物理结果组成及设计再进行阅读&#xff09;。 羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C…

Java面试专题——面向对象

面向过程和面向对象的区别 面向过程&#xff1a;当事件比较简单的时候&#xff0c;利用面向过程&#xff0c;注重的是事件的具体的步骤/过程&#xff0c;注重的是过程中的具体的行为&#xff0c;以函数为最小单位&#xff0c;考虑怎么做。 面向对象&#xff1a;注重找“参与者…

GeekHour

Linux Linux的是类Unix系统&#xff0c;作者是Linus&#xff0c;也是git的作者。符合GPL&#xff08;General Public License&#xff09;就可以Linux的使用、修改、再发布。 Linux四部分&#xff1a; 内核&#xff1a;驱动、内存管理、进程管理、文件系统、网络协议栈…。作…

学习golang语言时遇到的难点语法

作者是java选手&#xff0c;实习需要转go&#xff0c;记录学习go中遇到的一些与java不同的语法。 defer defer特性 1. 关键字 defer 用于注册延迟调用。 2. 这些调用直到 return 前才被执。因此&#xff0c;可以用来做资源清理。 3. 多个defer语句&#xff0c;按先进…

一个面向领域的直播平台开源!

面向教育等领域&#xff0c;二开后可以做视频会议等 在线直播平台 基于 Spring Boot 和 SRS 平台功能 视频直播 在线聊天 直播提醒 作业上传和批改 项目介绍了一个基于Spring Boot和SRS的在线直播平台&#xff0c;这个平台具备视频直播、在线聊天、直播提醒以及…

软件测试—— 接口测试(HTTP和HTTPS)

软件测试—— 接口测试&#xff08;HTTP和HTTPS&#xff09; HTTP请求方法GET特点使用场景URL结构URL组成部分URL编码总结 POST特点使用场景请求结构示例 请求标头和响应标头请求标头&#xff08;Request Headers&#xff09;示例请求标头 响应标头&#xff08;Response Header…

Mysql约束(学习自用)

一、概述 注意&#xff1a; 1&#xff09;多个约束之间用空格分开 二、外键约束 三、约束行为

linux-NFS网络共享存储服务配置

1.NFS服务原理 NFS会经常用到&#xff0c;用于在网络上共享存储&#xff0c;这样讲&#xff0c;你对NFS可能不太了解&#xff0c;举一个例子&#xff0c; 加入有三台机器A,B,C&#xff0c;它们需要访问同一个目录&#xff0c;目录中都是图片&#xff0c;传统的做法是把这些 图…

LabVIEW太赫兹二维扫描成像系统

使用LabVIEW设计太赫兹二维扫描成像系统。通过LabVIEW平台开发&#xff0c;结合硬件如太赫兹源、平移台、锁相放大器等&#xff0c;实现了高效、精准的成像功能。系统采用蛇形扫描方式&#xff0c;通过动态调整扫描参数&#xff0c;达到优化成像质量的目的。 ​ 项目背景 在非…

kafka学习笔记6 ACL权限 —— 筑梦之路

在Kafka中&#xff0c;ACL&#xff08;Access Control List&#xff09;是用来控制谁可以访问Kafka资源&#xff08;如主题、消费者组等&#xff09;的权限机制。ACL配置基于Kafka的kafka-acls.sh工具&#xff0c;能够管理对资源的读取、写入等操作权限。 ACL介绍 Kafka的ACL是…