css设置八等分圆
现需要上图样式的布局，我通过两张向右方的图片，通过定位和旋转完成了布局。
问题：
由于是通过旋转获取到的样式，实际的盒子是一个长方形，当鼠标移入对应的箭头时选中的可能是其他盒子，如第一张设计稿可以看出，先需要移入对应块添加事件。
解决方法： 又画了一个圆，将圆平分成8等分通过css样式覆盖保证移入时能移入对应的块。然后覆盖到原本的环形块上，背景透明就可以看到想要的效果和实现事件。设计中心空白不能点击，多添加一个小圆环覆盖。
参考地址：https://blog.csdn.net/yatsov/article/details/81590011
八等分圆代码
<!DOCTYPE html>
<html>
<head><title>CSS等分圆</title><meta charset="utf-8"><style type="text/css">.circle-left{width: 62.5px;height: 125px;border-radius: 0px 62.5px 62.5px 0px;position: absolute;right: 0;transform-origin: 0 50%;}.circle-left:hover{background-color: yellowgreen !important;}.circle-right{width: 62.5px;height: 125px;border-radius: 62.5px 0px 0px 62.5px ;position: absolute;right: 0;transform-origin: 100% 50%;}#circle0{width: 125px;height: 125px;border-radius: 62.5px;background-color: yellowgreen;position: relative;transform: rotate(-22.5deg);}#circle2{background-color: #70f3ff;}#circle3{background-color: #ff461f;transform: rotate(45deg);}#circle4{background-color: #bce672;transform: rotate(90deg);}#circle5{background-color: #ffffff;transform: rotate(135deg);}#circle6{background-color: #3b2e7e;transform: rotate(-135deg);}#circle7{background-color: #ff2121;transform: rotate(270deg);}#circle8{background-color: #16a951;transform: rotate(315deg);}#circle9{background-color: #e0eee8;transform: rotate(45deg)}#left{clip: rect(0px 62.5px 125px 0px);position: absolute;right: 0px;width: 62.5px;height: 125px;overflow: hidden;}#right{clip: rect(0px 62.5px 125px 0px);position: absolute;left: 0px;width: 62.5px;height: 125px;overflow: hidden;}</style>
</head>
<body><div id="circle0"><div id="left"><div class="circle-left" id="circle2">1</div><div class="circle-left" id="circle3">2</div><div class="circle-left" id="circle4">3</div><div class="circle-left" id="circle5">4</div></div><div id="right"><div class="circle-right" id="circle9">6</div><div class="circle-right" id="circle8">7</div><div class="circle-right" id="circle7">8</div><div class="circle-right" id="circle6">9</div></div></div>
</body>
</html>
``## 实际业务样式代码
```vue
<template><div class="control"><!-- 加add 减subtract --><div class="control_img_box" title="关闭声音"><img src="@/assets/image/vol.png" alt=""></div><div class="control_img_box" title="进入全屏"><img @click="screenfull" src="@/assets/image/full.png" alt=""></div><div class="control_img_box" @click="setCameraControl" title="云台控制器"><img src="@/assets/image/control.png" alt=""></div><!-- 云台控件 摄像头控制 --><div class="camera-control" v-show="isShowCameraControl"><div class="camera-control-left flex"><div class="content-box"><!-- 拼接辅助线 --><!-- <div class="line1"></div><div class="line2"></div> --><!-- 展示圆环 --><div class="img-box" :class="'img-box'+(i+1)" v-for="(url,i) in imgArr" :key="i"><img @mouseenter="handleMouseEnter(i)" @mouseleave="handleMouseLeave(i)" :src="url" alt=""></div><!-- 绑定事件的透明圆环 --><div id="circle0"><div id="left"><div class="circle-left" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave(1)" id="circle2"></div><div class="circle-left" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave(2)" id="circle3"></div><div class="circle-left" @mouseenter="handleMouseEnter(3)" @mouseleave="handleMouseLeave(3)" id="circle4"></div><div class="circle-left" @mouseenter="handleMouseEnter(4)" @mouseleave="handleMouseLeave(4)" id="circle5"></div></div><div id="right"><div class="circle-right" @mouseenter="handleMouseEnter(8)" @mouseleave="handleMouseLeave(8)" id="circle9"></div><div class="circle-right" @mouseenter="handleMouseEnter(7)" @mouseleave="handleMouseLeave(7)" id="circle8"></div><div class="circle-right" @mouseenter="handleMouseEnter(6)" @mouseleave="handleMouseLeave(6)" id="circle7"></div><div class="circle-right" @mouseenter="handleMouseEnter(5)" @mouseleave="handleMouseLeave(5)" id="circle6"></div></div><div class="center"></div></div></div></div><div class="camera-control-right"><div class="btn-list"><div>变焦</div><div class="btn-box"><div class="flex" @click="toZoom('add')"><img src="@/assets/image/add.png" alt=""></div><div class="flex" @click="toZoom('minus')"><img src="@/assets/image/minus.png" alt=""></div></div></div><div class="btn-list"><div>缩放</div><div class="btn-box"><div class="flex" @click="toScale('add')"><img src="@/assets/image/add.png" alt=""></div><div class="flex" @click="toScale('minus')"><img src="@/assets/image/minus.png" alt=""></div></div></div></div></div></div>
</template><script>
import img from '@/assets/image/arrows.png'
import img2 from '@/assets/image/arrows21.png'
export default {name: '',components: {},props: [],data() {return {isShowCameraControl: false,imgArr: [img, img, img, img, img, img, img, img],}},mounted() {},methods: {handleMouseEnter(i) {this.$set(this.imgArr, i - 1, img2)},handleMouseLeave(i) {this.$set(this.imgArr, i - 1, img)},setCameraControl() {this.isShowCameraControl = !this.isShowCameraControl},screenfull() {this.$emit('screenfull')},toScale(str) {console.log('缩放', str)},toZoom(str) {console.log('变焦', str)}}
}
</script>
<style lang='scss' scoped>
.control {position: absolute;left: 0px;bottom: 0px;width: 100%;padding: 15px 7px;display: flex;justify-content: flex-end;&_img_box {cursor: pointer;padding: 10px 10px 6px;margin-right: 10px;background: linear-gradient(162deg, rgba(3, 33, 120, 0.9) 0%, rgba(3, 33, 120, 0.4) 100%);border-radius: 3px;opacity: 1;border: 1px solid;border-image: linear-gradient(180deg, rgba(18, 106, 205, 1), rgba(11, 87, 173, 0)) 1 1;> img {width: 20px;height: 20px;}}.camera-control {position: absolute;display: flex;top: -150px;right: 16px;padding: 6px 10px;width: 319px;height: 150px;background: linear-gradient(to bottom right, #032078ab 30%, #0b57ad60 100%);> div {flex: 1;}&-left {.content-box {position: relative;width: 125px;height: 125px;border-radius: 50%;background: url('@/assets/image/circle.png');background-size: 125px 125px;.circle-left {width: 62.5px;height: 125px;border-radius: 0px 62.5px 62.5px 0px;position: absolute;right: 0;transform-origin: 0 50%;}.circle-right {width: 62.5px;height: 125px;border-radius: 62.5px 0px 0px 62.5px;position: absolute;right: 0;transform-origin: 100% 50%;}#circle0 {position: absolute;left: 0px;top: 0px;width: 125px;height: 125px;border-radius: 62.5px;position: relative;transform: rotate(-22.5deg);.center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 50px;height: 50px;border-radius: 50%;}}#circle3 {transform: rotate(45deg);}#circle4 {transform: rotate(90deg);}#circle5 {transform: rotate(135deg);}#circle6 {transform: rotate(-135deg);}#circle7 {transform: rotate(270deg);}#circle8 {transform: rotate(315deg);}#circle9 {transform: rotate(45deg);}#left {clip: rect(0px 62.5px 125px 0px);position: absolute;right: 0px;width: 62.5px;height: 125px;overflow: hidden;}#right {clip: rect(0px 62.5px 125px 0px);position: absolute;left: 0px;width: 62.5px;height: 125px;overflow: hidden;}.line1 {position: absolute;width: 125px;height: 2px;background: red;left: 50%;margin-left: -62.5px;top: 50%;margin-top: -1px;z-index: 999;}.line2 {position: absolute;left: 50%;margin-top: -62.5px;top: 50%;margin-left: -1px;width: 2px;height: 125px;background: red;z-index: 999;}.img-box {// width: 54px;// height: 58px;position: absolute;// > img {// width: 54px;// height: 58px;// }}.img-box1 {left: 31px;top: -14px;transform: rotate(-90deg);}.img-box2 {left: 64px;top: -2px;transform: rotate(-45deg);}.img-box3 {left: 79px;top: 29px;transform: rotate(0deg);}.img-box4 {left: 67px;top: 62px;transform: rotate(46deg);}.img-box5 {left: 36px;top: 77px;transform: rotate(90deg);}.img-box6 {left: 4px;top: 66px;transform: rotate(135deg);}.img-box7 {left: -12px;top: 35px;transform: rotate(-180deg);}.img-box8 {left: -1px;top: 2px;transform: rotate(-135deg);}}}&-right {display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 14px;font-weight: bold;color: #a5c3ff;.btn-list {display: flex;align-items: center;margin: 12px 0px;}.btn-box {width: 70px;height: 32px;margin-left: 12px;background: linear-gradient(180deg, #009afc 0%, #003cb1 100%);box-shadow: inset 0px 2px 4px 0px #08ebff, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);border-radius: 2px;border: 1px solid #0e2977;display: flex;> div {width: 35px;height: 32px;cursor: pointer;> img {width: 16px;height: 16px;}}}}}
}
</style>
相关文章：
css设置八等分圆
现需要上图样式的布局，我通过两张向右方的图片，通过定位和旋转完成了布局。 问题： 由于是通过旋转获取到的样式，实际的盒子是一个长方形，当鼠标移入对应的箭头时选中的可能是其他盒子，如第一张设计稿可以看…...
「教程」如何使用一套代码在多种程序中接入天气预警API
引言 天气预警的重要性不言而喻，在遭受自然灾害和极端天气时，及时获得预警信息可以拯救生命和减少财产损失。如今，随着科技的进步，开发者和企业可以借助天气预警 API 这款强大的服务，将实时预警信息集成到自己的应用中…...
（MYSQL）数据库服务端的启动与停止，登录与退出
MYSQL服务的启动与停止 方式一：右击左下角win图标——选择计算机管理——选择计算机管理（本地）——选择服务和应用程序——找到mysql（此方法不好用） 方式二：通过管理员身份运行（必须是管理员身…...
数学建模学习（8）：单目标和多目标规划
优化问题描述 优化 优化算法是指在满足一定条件下,在众多方案中或者参数中最优方案,或者参数值,以使得某个或者多个功能指标达到最优,或使得系统的某些性能指标达到最大值或者最小值 线性规划 线性规划是指目标函数和约束都是线性的情况 [x,fval]linprog(f,A,b,Aeq,Beq,LB,U…...
【Vscode | R | Win】R Markdown转html记录-Win
Rmd文件转html R语言环境Vscode扩展安装及配置配置radian R依赖包pandoc安装配置pandoc环境变量验证是否有效转rmd为html 注意本文代码块均为R语言代码，在R语言环境下执行即可 R语言环境 官网中去下载R语言安装包以及R-tool 可自行搜寻教程 无需下载Rstudio Vscod…...
【Lua语法】字符串操作、字符串中的方法
1.对字符串的操作 --声明一个字符串 str "我是一个字符串"--1.获取字符串的长度 -- 前面加个#即可(注意：Lua中字母占1个长度，汉字占3个长度) print(#str)--2.字符串多行打印 -- 方法1.Lua中是支持转义字符的 print("哈哈\n嘻嘻&q…...
Linux 终端生成二维码
1、安装qrencode [rootnode1 script]# yum -y install qrencode2、输出正常的 [rootnode1 ~]# echo https://www.github.com|qrencode -o - -t utf83、输出彩色的 [rootnode1 ~]# qrencode -t utf8 -s 1 https://www.github.com|lolcatPS：没有lolcat命令 #由于…...
子组件未抛出事件 父组件如何通过$refs监听子组件中数据的变化
我们平时开发项目会使用一些比较成熟的组件库, 但是在极小的情况下,可能会出现我们需要监听某个属性的变化,使我们的页面根据这个属性发生一些改变,但是偏偏组件库没有把这个属性抛出来,当我们使用watch通过refs监听时,由于生命周期的原因还不能拿到,这时候我们可以这样做,以下…...
【C++】STL——stack的介绍和使用、stack的push和pop函数介绍和使用、stack的其他成员函数
文章目录 1.stack的介绍2.stack的使用2.1stack构造函数2.1stack成员函数（1）empty() 检测stack是否为空（2）size() 返回stack中元素的个数（3）top() 返回栈顶元素的引用（4）push() 将元素…...
基于BIM+AI的建筑能源优化模型【神经网络】
推荐：用 NSDT设计器 快速搭建可编程3D场景。 AEC（建筑、工程、施工）行业的BIM 技术，允许在实际施工开始之前虚拟地建造建筑物； 这带来了许多有形和无形的好处：减少成本超支、更有效的协调、增强决策权等等。…...
#P0998. [NOIP2007普及组] 守望者的逃离
题目背景 恶魔猎手尤迪安野心勃勃，他背叛了暗夜精灵，率领深藏在海底的娜迦族企图叛变。 题目描述 守望者在与尤迪安的交锋中遭遇了围杀，被困在一个荒芜的大岛上。 为了杀死守望者，尤迪安开始对这个荒岛施咒，这座岛…...
vue3+ts+elementui-plus二次封装弹框
一、弹框组件BaseDialog <template><div classmain><el-dialog v-model"visible" :title"title" :width"dialogWidth" :before-close"handleClose"><!-- 内容插槽 --><slot></slot><template…...
ffmpeg批量分割视频解决视频前几秒黑屏的问题解决
echo 请输入视频地址： set /p fp echo 请输入开始时间： set /p st echo 请输入结束时间： set /p et echo 请输入分片时间： set /p sgt echo 注意：循环范围参数要空格。 for /l %%i in (%st%, %sgt%, %et%) do call :aa…...
nodejs + express 调用本地 python程序
假设已经安装好 nodejs ; cd /js/node_js ; 安装在当前目录的 node_modules/ npm install express --save 或者 cnpm install express --save web 服务器程序 server.js const http require(http); const express require(express); const path require(path); const …...
微信小程序代码优化3个小技巧
抽取重复样式 样式复用 我们会发现很多时候在开发的过程中会存在多个页面中都用到了同样的样式，那么其实之前有提到过，公用样式可以放在app.wxss里面这样就可以直接复用。 如：flex布局的纵向排列，定义在app.wxss里面 .flex-co…...
某行动态cookie反爬虫分析
某行动态cookie反爬虫分析 1. 预览 反爬网址(base64): aHR0cDovL3d3dy5wYmMuZ292LmNu 反爬截图： 需要先加载运行js代码，可能是对环境进行检测，反调试之类的 无限debugger 处理办法 网上大部分人说的都是添加cookie来解决。 那个noscript…...
恒运资本：A股、港股全线爆发，沪指突破3300点，恒指重返2万点上方
7月31日，两市股指高开高走，沪指在金融、地产、酿酒等权重板块的带动下一举突破3300点。截至发稿，沪指、深成指、创业板指涨幅均超1%，上证50指数涨近2%。Wind数据显现，北向资金净买入超25亿元。 职业方面，券…...
Rust vs Go:常用语法对比(十二)
题图来自 Rust vs Go in 2023[1] 221. Remove all non-digits characters Create string t from string s, keeping only digit characters 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. 删除所有非数字字符 package mainimport ( "fmt" "regexp")func main() { s : hei…...
jmeter接口测试、压力测试简单实现
jmeter测试的组件执行顺序： 测试计划—>线程组—>配置元件—>前置处理器—>定时器—>逻辑控制器—>取样器—>后置处理器—>断言—>监听器 组件的作用范围： 同级组件同级组件下的子组件父组件 目前市面上的三类接口 1、基…...
PysparkNote006---pycharm加载spark环境
pycharm配置pyspark环境，本地执行pyspark代码 spark安装、添加环境变量不提了 File-Settings-Project-Project Structure-add content root添加如下两个路径 D:\code\spark\python\lib\py4j-0.10.7-src.zipD:\code\spark\python\lib\pyspark.zip 2023-07-26 阴 于…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...