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>

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

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

相关文章

10.函数

10.函数

10.1为什么需要函数 ●函数: function&#xff0c;是被设计为 执行特定任务的代码块 ●作用&#xff1a; 精简代码方便复用&#xff08;实现代码复用&#xff0c;提高开发效率&#xff09; 比如我们前面使用的alert()、prompt() 和console.log()都是一些js函数&#xff0c;只不…
阅读更多...
编译/反编译

编译/反编译

1.Android APK 1.软件 1.apktool 1.作用&#xff1a;反编译apk或重新打包apk 2.dex2jar 1.作用&#xff1a;将Android的可执行文件.dex转换为.jar 3.jd-gui 1.作用&#xff1a;方便阅读jar文件的代码工具 2.步骤 1.通过apktool将apk软件反编译2.使用dex2jar将classes.dex文件转…
阅读更多...
（十五） InfluxDB服务进程参数（influxd命令的用法）

（十五） InfluxDB服务进程参数（influxd命令的用法）

以下内容来自 尚硅谷&#xff0c;写这一系列的文章&#xff0c;主要是为了方便后续自己的查看&#xff0c;不用带着个PDF找来找去的&#xff0c;太麻烦&#xff01; 第 15 章 InfluxDB服务进程参数&#xff08;influxd命令的用法&#xff09; 15.1 influxd命令罗列 1、我们的…
阅读更多...
Django 图书管理系统

Django 图书管理系统

一、功能及页面设计 二、页面展示 (1)首页 (2)注册 (3)登录 (4)普通用户登录 4.1查看图书页面 4.2查看图书详情页 4.3修改密码 (5)管理员登录 5.1添加图书 5.2添加图片 三、代码展示 因为代码太多不好一个个展示 所以需要源码的小伙伴可以找我要代码 感谢三连支持&#xff0…
阅读更多...
【C++】多态原理剖析，Visual Studio开发人员工具使用查看类结构cl /d1 reportSingleClassLayout

【C++】多态原理剖析，Visual Studio开发人员工具使用查看类结构cl /d1 reportSingleClassLayout

author&#xff1a;&Carlton tag&#xff1a;C topic&#xff1a;【C】多态原理剖析&#xff0c;Visual Studio开发人员工具使用查看类结构cl /d1 reportSingleClassLayout website:黑马程序员C tool&#xff1a;Visual Studio 2019 date&#xff1a;2023年7月24日 目…
阅读更多...
最快桌面UI:Siticone Desktop UI 2.1.1 cRACK

最快桌面UI:Siticone Desktop UI 2.1.1 cRACK

富图尔主义控制 80 多个 .NET UI 组件和控件 现代未来 UI/UX 组件 为 Visual Studio 开发做好准备 无限的免费产品支持案例 超轻量和快速性能 广泛可定制和主题化 低资源消耗和占地面积 免版税开发和部署 NET 的最佳 UI 和 UX 库 从最好的图书馆探索无缝流畅的体验 使…
阅读更多...
二、SQL-5.DQL-9.执行顺序

二、SQL-5.DQL-9.执行顺序

一、案例&#xff1a; 查询年龄大于15的员工的姓名、年龄&#xff0c;并根据年龄进行升序排序 select name, age from emp where age > 15 order by age asc; 先执行①from&#xff08;定义emp的别名为e&#xff09;&#xff0c;再执行②where&#xff08;调用别名e&…
阅读更多...
SpringBoot集成Druid实现数据库连接池

SpringBoot集成Druid实现数据库连接池

一、引入依赖 完整的pom文件如下所示: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http…
阅读更多...
如何从任何地方远程解决电脑问题？

如何从任何地方远程解决电脑问题？

​如何远程解决电脑问题&#xff1f; “嗨&#xff01;我有一台Windows 10家用电脑。我外出旅行&#xff0c;但我的家人告诉我我的电脑有一段时间无法正常工作。我该如何远程检查电脑并解决相应的问题&#xff1f;提前谢谢&#xff01;” 您是否正在寻找远程解决电…
阅读更多...
JAVA解析EXCEL（JExcelAPI，POI，EasyExcel）

JAVA解析EXCEL（JExcelAPI，POI，EasyExcel）

前言 文章目录 前言JExcelAPIDemo POIHSSFWorkBookXSSFWorkBookDemo SXSSFWorkBookDemo XSSFReaderDemo EasyExcelDemo demo代码&#xff1a;https://github.com/RwTo/excel-demo JAVA解析Excel 一般有三种方式 JExcelAPI POI EasyExcel JExcelAPI 官网&#xff1a;https://je…
阅读更多...
【问题记录】Ubuntu 22.04 环境下，程序报：段错误（核心已转储）怎么使用 core 文件和GDB调试器 解决？

【问题记录】Ubuntu 22.04 环境下，程序报：段错误（核心已转储）怎么使用 core 文件和GDB调试器 解决？

目录 环境 问题情况 解决思路 原因分析 解决方法 番外知识 环境 VMware Workstation 16 Pro &#xff08;版本&#xff1a;16.1.2 build-17966106&#xff09;ubuntu-22.04.2-desktop-amd64 问题情况 本人在运行百万并发的服务端程序时&#xff0c;程序运行报&#xff1a…
阅读更多...
【云原生】Docker镜像的创建，Dockerfile

【云原生】Docker镜像的创建，Dockerfile

一、Docker镜像的创建 创建镜像有三种方法&#xff0c;分别为【基于已有镜像创建】、【基于本地模板创建】以及【基于Dockerfile创建】。 1.基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改docker run -it --name web centos:7 /bin/…
阅读更多...
UDS之27服务

UDS之27服务

SecurityAccess&#xff08;0x27&#xff09;—— 安全访问 这个服务的目的是为那些限制访问&#xff0c;以及和排放、安全相关的一些服务和数据提供一些访问权限来保护数据。 此服务执行步骤如下&#xff1a; &#xff08;1&#xff09;Client请求一个种子&#xff08;Seed…
阅读更多...
在这里资源站创意LOGO设计大赛开始啦

在这里资源站创意LOGO设计大赛开始啦

阅读更多...
可证明安全初步（Provable Security Basics）

可证明安全初步（Provable Security Basics）

Speecher: Bingsheng Zhang 这一系列的课程&#xff0c;为了介绍一些基础&#xff0c;弥补一些上密码学课和看论文的Gap。 历史上的密码学是art&#xff0c;就像鲁班锁&#xff0c;看着很精妙&#xff0c;但是没有证明。 1970s以来&#xff0c;逐渐发展成Science。 定义和模…
阅读更多...
Vue3 axios数据请求封装

Vue3 axios数据请求封装

Vue3 axios数据请求封装 环境&#xff1a;vue3tsvite 首先在项目目录下安装axios 运行 npm install axios 成功后在package.json文件会显示。 目录&#xff1a; request.ts文件代码&#xff1a; import axios from axiosconst request axios.create({baseURL:https://api.…
阅读更多...
20230721 Essex UK, Dongbing Gu 公开讲座--机器人前沿

20230721 Essex UK, Dongbing Gu 公开讲座--机器人前沿

个人主页&#xff1a; https://www.essex.ac.uk/people/GUDON81301/dongbing-gu 机器人领域任务的特点&#xff1a;dull, dirty, dangerous tasks in remote spaces 机器鱼&#xff1a; 实时港口环境监测 机器鱼群探索算法 化学传感器 水面声呐定位系统/SLAM/通信问题 Robotic …
阅读更多...
SpringBoot中使用测试框架MockMvc来模拟HTTP请求测试Controller接口

SpringBoot中使用测试框架MockMvc来模拟HTTP请求测试Controller接口

场景 Java中进行单元测试junit.Assert断言、Mockito模拟对象、verify验证模拟结果、Java8中lambda的peek方法使用&#xff1a; Java中进行单元测试junit.Assert断言、Mockito模拟对象、verify验证模拟结果、Java8中lambda的peek方法使用_assert java8_霸道流氓气质的博客-CSD…
阅读更多...
【MySQL】centos 7下MySQL的环境搭建

【MySQL】centos 7下MySQL的环境搭建

从本期博客开始我们正式进入到数据库的学习&#xff0c;在学习数据库时所用到的工具是Linux环境下的MySQL 目录 一、检查环境中是否装有MySQL 二、获取MySQL官方yum源 三、配置MySQL官方yum源 四、一键安装MySQL 五、启动mysql服务 六、登录MySQL 七、修改mysql配置文件…
阅读更多...
智慧园区电力监控解决方案

智慧园区电力监控解决方案

1、概述 电力监控系统实现对园区变电站、配电房内断路器、变压器、柴油发电机以及其它重要设备进行监视、测量、记录、报警等功能&#xff0c;并与保护设备和远方控制中心及其他设备通信&#xff0c;实时掌握园区变电站和配电房运行状况&#xff0c;快速排除故障&#xff0c;保…
阅读更多...
最新文章

Copyright @ 2022~2023