CSS 实现任意角度圆环

news2024/11/23 12:22:44

 

 

参考链接: css 制作圆环 - 掘金

主要思路: 利用 CSS 的 clip-path 属性进行裁剪 

clip-path 具体信息参考 polygon() - MDN (mozilla.org) 

该属性原理是:利用多边形进行对图形的裁剪。

根据具体代码,去分析

clip-path: polygon(50% 0%, 100% 50%,50% 100%,0% 50%);

 根据代码,我们可以得到4组数据,分别是:【黄色部分为 X 轴,绿色部分为Y轴】

  1.  50% 0%
  2.  100% 50% 
  3.  50% 100%
  4.  0% 50%

 提示: polygon 括号里面有 N 组数据,多边形就有 N 个顶点

这样我们就可以得到一个菱形

 

 根据这个原理,去裁剪圆环,就能得到任意角度的圆环。


正文部分

 先写 JS 部分,去控制百分比【CSS变量】

        function get(angle, flag = true) {

            if (angle <= 45) {
                if (flag) {
                    return ((Math.tan(angle * 2 * Math.PI / 360) * 0.5 + 0.5) * 100).toFixed(2) + "%"
                }
                return ((Math.tan(angle * 2 * Math.PI / 360) * 0.5) * 100).toFixed(2) + "%"
            }

            if (angle <= 135) {
                // 首先将 145 分成2段进行处理
                if (angle <= 90) {
                    // 45 - 90
                    return get(angle - 45, false)
                } else {
                    // 90 - 145  
                    return get(angle - 90)
                }
            }

            if (angle <= 225) {
                // 与 135 同理,也分成 2 段
                if (angle <= 180) {
                    let v1 = get(angle - 135, false)
                    let result = (100 - parseFloat(v1.substring(0, v1.length - 4))).toFixed(2)
                    return result + "%"
                } else {
                    let v2 = get(angle - 180)
                    let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2)
                    return result + "%"
                }
            }

            if (angle <= 315) {
                if (angle <= 225) {
                    let v1 = get(angle - 225, false)
                    let result = (100 - parseFloat(v1.substring(0, v1.length - 4))).toFixed(2)
                    return result + "%"
                } else {
                    let v2 = get(angle - 270)
                    let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2)
                    return result + "%"
                }
            }

            if (angle <= 360) {
                return get(angle - 315, false)
            }

            // 当以上条件都不满足,参数不正确
            throw new Error("参数必须为 0 - 360")
        }

样式部分:【结构部分】

<div class="container">
        <div class="circle cirque360" data-angle="0"></div>
        <div class="rect"></div>
        <div class="backup"></div>
    </div>
:root {
            --cirque-percent: 0;
        }

        .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #c5e1a5;
        }

        .rect {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: yellow;
            z-index: 0;
        }

        .backup {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            z-index: 1;
        }

        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: blue;
            border: 10px solid #9c27b0;

            box-sizing: border-box;
            z-index: 2;
        }

        .cirque45 {
            /* 剪切圆环 */
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 0);
        }

        .cirque135 {
            clip-path: polygon(50% 0, 50% 50%, 100% var(--cirque-percent), 100% 0);
        }

        .cirque225 {
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 100%, 100% 100%, 100% 0);
        }

        .cirque315 {
            clip-path: polygon(50% 0, 50% 50%, 0% var(--cirque-percent), 0% 100%, 100% 100%, 100% 0%);
        }

        .cirque360 {
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
        }

重点修改这个

 cirque360 要更改成 cirque45 cirque135 cirque225 cirque360 四种 

比如: cirque45 ,输入角度不能大于45。cirque135,输入角度不能大于135

现在打开浏览器:

控制台改变 CSS 变量

document.documentElement.style.setProperty('--cirque-percent', get(120));

运行结果:

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaWeb:Servlet、ServletContext、HttpServletResponse、HttpServletRequest 的详细内容

文章目录 JavaWeb - 02一、Servlet1. 简介2. HelloServlet3. Servlet 原理4. Mapping 原理 二、ServletContext1. 共享数据2. 获取初始化参数3. 请求转发4. 读取资源文件 三、HttpServletResponse1. 方法介绍2. 应用&#xff1a;下载文件3. 应用&#xff1a;创建验证码4. 应用&…

office web apps在线office文件预览部署及问题处理

文件下载链接网盘&#xff1a; 链接: https://pan.baidu.com/s/1OmWM5END0jyWESGzFCniEw 提取码: ejpg 基本环境需要两台机&#xff0c;1台为域控&#xff0c;1台为 &#xff08;office web apps &#xff0c;需要加入到域&#xff09; 主机1&#xff1a;添加域控服务 安装完…

设备树简介

设备树 设备树简介 设备树是一种描述硬件的数据结构&#xff0c;它起源于OpenFirmware&#xff08;OF&#xff09;。 在Linux 2.6中&#xff0c; ARM架构的板极硬件细节过多地被硬编码在arch/arm/plat-xxx和arch/arm/mach-xxx中&#xff0c;采用设备树后&#xff0c;许多硬件…

python操作字典

# 字典 score{"张三":"23","王五":"45"} print(score) dctdict(name张三,age20) print(dict) print(type(score)) # 字典元素的获取 print(score[张三]) print(score.get(张三)) # 判断是否是字典中的元素 print(王五 in score) # 为字…

浅析AI视频智能识别技术如何助力智慧平安校园建设

校园安全一直是学生健康成长、全面发展的前提与保障。校园门口伤害事件的频发与校园内应急事件的突发&#xff0c;让建设平安校园的任务愈加急迫。校园人流量大、监控点多&#xff0c;安保人员无法同时盯住上百个视频画面&#xff0c;亦无法保证24小时有效监控。传统的校园安防…

软件测试简历项目经验怎么写?一篇足矣解决

一、前言&#xff1a;浅谈面试 面试是我们进入一个公司的门槛&#xff0c;通过了面试才能进入公司&#xff0c;你的面试结果和你的薪资是息息相关的。那如何才能顺利的通过面试&#xff0c;得到公司的认可呢?面试软件测试要注意哪些问题呢?下面和笔者一起来看看吧。这里分享一…

OpenGL(十一)——材质

目录 一、前言 二、物体材质 三、光源材质 一、前言 OpenGL材质是模拟现实世界中不同材质物体表面&#xff0c;如木制箱子和钢制箱子对光的反射程度不同。物体材质对接受光散射程度不同&#xff0c;较少散射产生较小高光点&#xff0c;较多散射则会产生较大高光点。前面章节…

如何节约ChatGPT消耗的token

如何节约GPT的token.md 原文链接&#xff1a;小回博客 如何节约GPT的token 一、模拟一下携带上下文的流程&#xff1a; 第1次问答&#xff1a; 你&#xff1a;帮我写一个1000字的文案&#xff08;13&#xff09; gpt: xxxxxx (1000)第2次问答&#xff1a; 你&#xff1a;谢…

《我命由我不由天》蔡志忠——笔记三

目录 经典摘录 1、大脑是用来思考的 2、养生主 3、自己的问题&#xff0c;自己找答案 4、42岁自学英文 5、终身阅读 6、打不垮我们的终究使我们更强大 7、大环境下失业 8、生命只能兑现此刻 经典摘录 1、大脑是用来思考的 罗素非常反对制式教育&#xff0c;他说&#…

有哪些比较好的测试用例管理工具?

“新入职小型创业公司&#xff0c;想要一个比Excel高效且好用的工具。”我预料很多人会提TestLink、Jira、PingCode 等一堆平台&#xff0c;都2023年了&#xff0c;若还是复制粘贴的10年前这一套&#xff0c;那就让人看不下去了。为了让大家少走弯路&#xff0c;所以我写了这篇…

【自用】配置minGW、vscode配置ESP-IDF环境

步骤总览 1.配置minGW 2.下载安装esp-idf软件 3.将vscode esp-idf插件 和 esp-idf软件进行关联 一、配置minGW 1.下载 链接&#xff1a;https://pan.baidu.com/s/1j6ITlNDDyivKwpWNBjASvg?pwd0108 提取码&#xff1a;0108 2.解压 解压上面下载的压缩包即可 3.配置环境变…

EFDC建模方法及在地表水环境评价、水源地划分、排污口论证应用

目录 专题一 软件安装 专题二 EFDC模型讲解 专题三 一维河流模拟实操&#xff08;上机操作&#xff09; 专题四 建模前处理&#xff08;上机操作&#xff09; 专题五 EFDC网格剖分介绍&#xff08;上机操作&#xff09; 专题六 EFDC二维湖库水动力模拟/非保守染色剂模拟&…

prometheus监控数据持久化

前置条件 1.规划两台主机安装prometheus # kubectl get nodes --show-labels | grep prometheus nm-foot-gxc-proms01 Ready worker 62d v1.23.6 beta.kubernetes.io/archamd64,beta.kubernetes.io/oslinux,kubernetes.io/archamd64,kubernetes.io…

5.Redis持久化

5.Redis持久化 总体介绍持久双雄一图&#xff1a;Redis persistence RDB&#xff08;Redis Database&#xff09;官网介绍RDB&#xff08;Redis 数据库&#xff09;&#xff1a;RDB 持久性以指定的时间间隔执行数据集的时间点快照。能干嘛&#xff1f;案例演示&#xff1a;需求…

图像处理——连接IP摄像头上传到服务器实现目标识别

前言 1.项目的需求是&#xff0c;本地连接IP摄像头&#xff0c;然后把图像上传到图像处理服务器器进行处理&#xff0c;得到的结果返回本地。 2.IP摄像头使用的是大华的摄像头&#xff0c;目标识别用的yolov5的模型&#xff0c;服务器用的是flask&#xff0c;实现语言是pytho…

【闪击Python】字符串的创建和驻留机制

&#x1f48c; 博客内容&#xff1a;字符串的创建和驻留机制 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准前端&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#x…

Dear Reality 发布全新 EXOVERB MICRO 混响插件

空间感混响效果新高度 Dear Reality 发布全新 EXOVERB MICRO 混响插件 Dear Reality 针对立体声制作推出最新的混响插件 EXOVERB MICRO&#xff0c;提供一流的真实感和空间感混响效果&#xff0c;将立体声混音技术提升至新高度。这个紧凑型音频插件功能非常强大&#xff0c;采…

得物社区亿级ES数据搜索性能调优实践

1.背景 2020年以来内容标注结果搜索就是社区中后台业务的核心高频使用场景之一&#xff0c;为了支撑复杂的后台搜索&#xff0c;我们将社区内容的关键信息额外存了一份到Elasticsearch中作为二级索引使用。随着标注业务的细分、迭代和时间的推移&#xff0c;这个索引的文档数和…

VisualStudio2022配置PCL点云库教程

属性管理器 首先&#xff0c;打开属性管理器&#xff1a;视图–其他窗口–属性管理器 打开后如图所示&#xff0c;选中Debug|x64&#xff0c;右键单击&#xff0c;选择属性 如图所示&#xff0c;需要修改的是VC目录中的包含目录和库目录&#xff1a; ** 包含目录 添加内容…