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

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

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

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

根据具体代码，去分析

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

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

50% 0%
100% 50%
50% 100%
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 - 90return 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));

运行结果：

完整代码如下：（可能与上面不同）

<!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"><title>Document</title><style>:root {--cirque-percent: 50%;}.container {position: relative;display: flex;justify-content: center;align-items: center;width: 500px;height: 500px;margin: 100px auto;background-color: #c5e1a5;}button {position: absolute;bottom: 25px;right: 50px;width: 70px;height: 45px;background-color: #0072f5;outline: none;border: none;border-radius: 10px;color: white;font-size: 1.2rem;}button:hover {background-color: #73b0f5;}.circle-track {position: relative;width: 120px;height: 120px;border: 30px solid black;border-radius: 50%;box-sizing: border-box;}.circle {position: absolute;top: -20px;left: -20px;width: 100px;height: 100px;border-radius: 50%;border: 10px solid #9198e5;box-sizing: border-box;}.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%);}</style>
</head><body><div class="container"><div class="circle-track"><div class="circle"></div></div><button>+10</button></div><script>let count = 0;const btn = document.querySelector("button")btn.onclick = () => {count += 10;if (count >= 360) {count = 0;}console.log(count);document.documentElement.style.setProperty('--cirque-percent', get(count));}const cirque = document.querySelector(".circle");function get(angle, flag = true) {if (angle <= 45) {cirque.className = "circle cirque45"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) {let v1 = get(angle - 45, false)cirque.className = "circle cirque135"return v1} else {let v1 = get(angle - 90)cirque.className = "circle cirque135"return v1}}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) + "%"cirque.className = "circle cirque225"return result} else {let v2 = get(angle - 180)let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2) + "%"cirque.className = "circle cirque225"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) + "%"cirque.className = "circle cirque315"return result} else {let v2 = get(angle - 270)let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2) + "%"cirque.className = "circle cirque315"return result}}if (angle <= 360) {let v1 = get(angle - 315, false)cirque.className = "circle cirque360"return v1}// 当以上条件都不满足,参数不正确throw new Error("参数必须为 0 - 360")}</script>
</body></html>

CSS 实现任意角度圆环相关推荐

c语言图形学画扇形代码,利用CSS绘制任意角度的扇形示例代码
前言扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果效果图示例代码: 扇形绘制 } .sx1{ position: absolut ...
html扇形调节角度,CSS如何实现任意角度的扇形（代码示例）
本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白 ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
JAVA对图片的任意角度旋转，以及镜像操作
package relevantTest; /* * 该代码实现了对图像的水平镜像变换,垂直镜像变换,任意角度旋转,jtf的实时监控,以及对图像的缩放变换,以及按钮的若隐若现效果. * 在对图像进 ...
任意角度人脸检测pcn
这个也是任意角度物体检测: BBAVectors https://github.com/yijingru/BBAVectors-Oriented-Object-Detection 旋转目标检测 PIo ...
python opencv 实现任意角度的透视变换
任意角度数据增强: https://blog.csdn.net/jacke121/article/details/106363307 # -*- coding:utf-8 -*- import cv ...
python怎么让x轴45°展示_python opencv实现任意角度的透视变换实例代码
本文主要分享的是一则python+opencv实现任意角度的透视变换的实例,具体如下: # -*- coding:utf-8 -*- import cv2 import numpy as np def ...
81.游戏项目-物体任意角度飞行和停止
1 package test; 2 import java.awt.Color; 3 import java.awt.Font; 4 import java.awt.Frame; 5 import j ...

CSS 实现任意角度圆环

正文部分

CSS 实现任意角度圆环相关推荐

最新文章

热门文章