绘制空心环形

1.通过几个div拼接绘制空心环形进度条。

通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆

  • html:
    <body>
      <div class="circle">
        <div class="circle-left"></div>
        <div class="circle-left-mask"></div>
        <div class="circle-right"></div>
        <div class="circle-right-mask"></div>
      </div>
    </body>
    
  • css:
    .circle {
      -webkit-mask: radial-gradient(transparent 150px, #000 150px);
      width: 400px;
      height: 400px;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
    }
    .circle-left {
      width: 50%;
      height: 100%;
      background: rgb(234, 67, 15);
      position: absolute;
      left: 0;
      z-index: 1;
    }
    .circle-left-mask {
      width: 50%;
      height: 100%;
      background: #24B39B;
      transform-origin: 100% 50%;
      position: absolute;
      transition: transform 1s linear;
      left: 0;
      z-index: 2;
    }
    .circle-right {
      width: 50%;
      height: 100%;
      background: rgb(234, 67, 15);
      position: absolute;
      right: 0;
      z-index: 3;
    }
    .circle-right-mask {
      width: 50%;
      height: 100%;
      background: #24B39B;
      transition: transform 1s linear;
      transform-origin: 0% 50%;
      position: absolute;
      right: 0;
      z-index: 4;
    }
    
  • js绘制度数方法
    function drawing(rotate){
    var right = document.getElementsByClassName('circle-right-mask')[0]
    var left = document.getElementsByClassName('circle-left-mask')[0]
    rotate=rotate>360?360:rotate
    if(rotate<=180){
      right.style.transform = `rotate(${rotate}deg)`
    }else{
      right.style.transform = `rotate(180deg)`
      setTimeout(()=>{
          left.style.transform = `rotate(${rotate - 180}deg)`
          left.style.transition = `transform ${1/180*(rotate - 180)}s linear`
          right.style.opacity = 0;
        },999)
      }
    }
    

2.利用clip-path绘制环形

通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆

  • html:
      <body>
        <div class="circle">
          <div class="circle-content"></div>
          <div class="circle-content-mask"></div>
        </div>
      </body>
    
  • css:
      .circle {
        -webkit-mask: radial-gradient(transparent 150px, #000 150px);
        width: 400px;
        height: 400px;
        overflow: hidden;
        border-radius: 50%;
        position: relative;
      }
      .circle-content{
        width:100%;
        height: 100%;
        background: rgb(234, 67, 15);
        position: absolute;
        left: 0;
      }
      .circle-content-mask {
        width: 100%;
        height: 100%;
        background: #24B39B;
        left: 0;
        z-index:1;
        clip-path:polygon(50% 50%,50% 0%,50% 50%);
        -webkit-clip-path:polygon(50% 50%,50% 0%,50% 50%)
      }
    
  • 通过Math.tan计算出位置,并在90、180、270、360做特殊处理
      function drawing(rotate){
        var circle = document.getElementsByClassName('circle')[0]
        var mask = document.getElementsByClassName('circle-content-mask')[0]
        var width=circle.offsetWidth
        var r = width/2
        if(rotate<90){
          var rad = rotate * Math.PI/180;
          var x = r*Math.tan(rad)+r
          mask.style=`clip-path:polygon(50% 50%,50% 0%,${x}px 0,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,${x}px 0,50% 50%)`
        }else if(rotate==90){
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 50%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 50%,50% 50%)`
        }else if(rotate<180){
          var rad1 = (rotate-90) * Math.PI/180;
          var y = r*Math.tan(rad1)+r
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% ${y}px,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% ${y}px,50% 50%)`
        }else if(rotate==180){
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,50% 100%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,50% 100%,50% 50%)`
        }else if(rotate<270){
          var rad2 = (rotate-180) * Math.PI/180;
          var x1 = r-r*Math.tan(rad2)
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,${x1}px 100%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,${x1}px 100%,50% 50%)`
        }else if(rotate==270){
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 50%,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 50%,50% 50%)`
        }else if(rotate<360){
          var rad3 = (rotate-270) * Math.PI/180;
          var y2 = r-r*Math.tan(rad3)
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% ${y2}px,50% 50%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% ${y2}px,50% 50%)`
        }else{
          mask.style=`clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 0%,50% 0%);-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0,100% 100%,0% 100%,0% 0%,50% 0%)`
        }
        mask.style.transition = `all 1s linear`
      }
    
  • 说明:

在这里插入图片描述

-#### js计算三角函数

    var sin30 = Math.sin(30 * Math.PI / 180)
    console.log(sin30);  //0.49999999999999994

    var cos60 = Math.cos(60 * Math.PI / 180)
    console.log(cos60);  //0.5000000000000001

    var tan45 = Math.tan(45 * Math.PI / 180)
    console.log(tan45);  //0.9999999999999999

css实现扇形

  • 通过linear-gradient绘制一个左右颜色不一致的圆
  • 设置一个伪类半圆,颜色和圆的一种颜色一致
  • 通多动画实现
  • 伪类旋转好多度,执行两次,如果大于180度;执行第二个动画,改变颜色,同时旋转度数执行的二次
<style>
  main{
    width: 100%;
    padding: 60px 0;
  }
  .chart{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 29px;
	width:100%;
	
  }
  .chart > p{
    width: 199px;
  }
  .chart > div{
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    background-color: #E8E2D6;
    background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
  }
  .chart div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
	/* 伪类旋转好多度,执行两次,如果大于180度;执行第二个动画,改变颜色,同时旋转度数执行的二次 */
    animation: pie-chart-spin 3s linear var(--count) forwards,
                pie-chart-bg 3s step-end forwards;
  }
  @keyframes pie-chart-spin {
    to { transform: rotate(180deg); }
  }
  @keyframes pie-chart-bg {
		to { background: var(--bgColor); }
	}

</style>
<body>
  <main>
  <!-- count:度数/360*2,bgColor:count大于1时是扇形的颜色#b4a078,小于1时是背景色#E8E2D6 -->
    <div class="chart" style='--count:1.6;--bgColor:#b4a078;---name:pie-chart-bg'>
      <div class="pie"></div>
    </div>
  </main>
</body>

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

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

相关文章

maven知识加强理解

maven知识 聚合: 父工程通过 modules标签&#xff0c;将子模块聚集起来&#xff0c;好处方便管理&#xff0c;父工程执行maven命令&#xff0c;所有的子模块都会执行 继承: 子模块通过parent标签&#xff0c;可以从父工程继承一些依赖 maven生命周期 三套 第一套:clean清理 第…

蓝桥杯(更新中)

递归与递推 递归 1.指数型枚举 解析&#xff1a;从 1 ∼ n 这 n 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 思路&#xff1a;枚举每一位对应的数字选与不选&#xff0c;例如&#xff1a;第一位对应的数字为1&#xff0c;有一种方案是选1&#xff0c;另…

IC-随便记

1、移远通信---通信模组 物联网解决方案供应商&#xff0c;可提供完备的IoT产品和服务&#xff0c;涵盖蜂窝模组(5G/4G/3G/2G/LPWA)、车载前装模组、智能模组&#xff08;5G/4G/边缘计算&#xff09;、短距离通信模组(Wi-Fi&BT)、GNSS定位模组、卫星通信模组、天线等硬件产…

java数据结构与算法刷题-----LeetCode279. 完全平方数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 动态规划四平方和定理 动态规划 解题思路&#xff1a;时间复杂度…

图像处理_积分图

目录 1. 积分图算法介绍 2. 基本原理 2.1 构建积分图 2.2 使用积分图 3. 举个例子 1. 积分图算法介绍 积分图算法是图像处理中的经典算法之一&#xff0c;由Crow在1984年首次提出&#xff0c;它是为了在多尺度透视投影中提高渲染速度。 积分图算法是一种快速计算图像区域和…

LeetCode-56. 合并区间【数组 排序】

LeetCode-56. 合并区间【数组 排序】 题目描述&#xff1a;解题思路一&#xff1a;排序&#xff1f;怎么排&#xff1f;当然是排各个区间的左边界&#xff0c;然后判断下一个边界的左边界与结果数组里面的右边界是否重叠。解题思路二&#xff1a;优化解题思路三&#xff1a;0 题…

Linux: 进程优先级

Linux: 进程优先级 一、进程优先级概念二、如何查看进程优先级三、如何修改进程的优先级&#xff08;PRL vs NI&#xff09;四、为何优先级PRL必须限定范围五、进程其他特性 一、进程优先级概念 优先级的本质就是排队&#xff0c;而排队则是资源不足所引起的。在计算机中&#…

《Lost in the Middle: How Language Models Use Long Contexts》AI 解读

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

【JavaScript 漫游】【049】ES6 规范中对象的扩展

文章简介 本篇文章为【JavaScript 漫游】专栏的第 049 篇文章&#xff0c;对 ES6 规范中对象的扩展知识点进行了记录。具体包括&#xff1a; 属性的简洁表示法属性名表达式方法的 name 属性属性的可枚举性和遍历super 关键字对象的扩展运算符链判断运算符Null 判断运算符新增…

MIT最新研究成果 机器人能够从错误中纠偏 无需编程介入和重复演示

目前科学家们正在努力让机器人变得更加智能&#xff0c;教会他们完成诸如擦拭桌面&#xff0c;端盘子等复杂技能。以往机器人要在非结构化环境执行这样的任务&#xff0c;需要依靠固定编程进行&#xff0c;缺乏场景通用性&#xff0c;而现在机器人的学习过程主要在于模仿&#…

ctf题目

目录 1.文件包含的一道题目&#xff0c;没什么难度&#xff0c; 2.一道sql注入的题目&#xff0c;伪静态 3.限制只能本地访问。 1.文件包含的一道题目&#xff0c;没什么难度&#xff0c; 但是一个点就是它这里去包含的那个文件名就是flag&#xff0c;而不是flag.php也不是f…

Linux之miniconda的安装和使用

一、miniconda简介 Miniconda和Anaconda都是由Continuum Analytics开发的Python发行版。二者的主要区别在于它们所自带的软件包集合的大小。Miniconda是一个免费的conda最低安装程序。它是Anaconda的一个小型引导程序版本&#xff0c;只包括conda、Python、它们都依赖的包&…

C++语言·入门

现在我们讲完了数据结构初阶部分的内容&#xff0c;数据结构剩下的内容会在C语言讲解的差不多的时候加入。 1. 什么是C C语言是结构化模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度抽象和建模时&#xff0c…

STM32学习笔记(10_1)- I2C通信协议

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期开…

Linux基础命令篇之——压缩与解压(tar、gzip、bzip2、zip和unzip)

linux基础命令——解压与压缩 以下是关于Linux命令tar、gzip、bzip2、zip和unzip的详细介绍&#xff1a; 1. tar 这个是Linux用的最多的解压缩命令 tar是Linux系统中用于创建和处理归档文件的命令。归档文件是一个包含多个文件和/或目录的单一文件。常与压缩命令gzip或bzip2结…

【CANN训练营笔记】Atlas 200I DK A2体验手写数字识别模型训练推理

环境介绍 开发板&#xff1a;Huawei Atals 200I DK A2 内存&#xff1a;4G NPU&#xff1a;Ascend 310B4 CANN&#xff1a;7.0 准备环境 下载编译好的torch_npu wget https://obs-9be7.obs.cn-east-2.myhuaweicloud.com/wanzutao/torch_npu-2.1.0rc1-cp39-cp39-linux_aarch…

.NET CORE 分布式事务(四) CAP实现最终一致性

目录 引言&#xff1a; 1.0 最终一致性介绍 2.0 CAP 2.0 架构预览 3.0 .NET CORE 结合CAP实现最终一致性分布式事务 3.1 准备工作(数据库&#xff0c;本文使用的是MySql) 3.1.1 数据模型 3.1.2 DbContext 3.1.3 数据库最终生成 3.2 Nuget引入 3.3 appsettings.json …

【OS探秘】【虚拟化】【软件开发】VirtualBox 虚拟化软件卸载和重装

往期OS系列博文&#xff1a; 【OS探秘】【虚拟化】【软件开发】在Windows 11上安装mac OS虚拟机 【OS探秘】【虚拟化】【软件开发】在Windows 11上安装Kali Linux虚拟机 一、事出有因 近日&#xff0c;笔者的Oracle VM VirtualBox突然抽风了&#xff0c;虚拟机无法启动&…

深入理解MapReduce:从Map到Reduce的工作原理解析

当谈到分布式计算和大数据处理时&#xff0c;MapReduce是一个经典的范例。它是一种编程模型和处理框架&#xff0c;用于在大规模数据集上并行运行计算任务。MapReduce包含三个主要阶段&#xff1a;Map、Shuffle 和 Reduce。 ** Map 阶段 ** Map 阶段是 MapReduce 的第一步&am…

Linux appimage如何正确打开

在之前的文章中&#xff0c;提到使用appimage软件非常方便。 但是首次使用会遇到这样的问题&#xff1a; 1. 双击打不开 2. 在终端打开提示&#xff1a; /home/roy/software/appimage/Obsidian-1.5.11.AppImage dlopen(): error loading libfuse.so.2 AppImages require …