孤卷残梦饮一池恨 2021-11-26 19:59 采纳率: 80%
浏览 29
已结题

vue或者uniapp如何实现多个div环形布局

问题遇到的现象和发生背景

操作环境、软件版本等信息

尝试过的解决方法

我想要达到的结果

img

  • 写回答

2条回答 默认 最新

  • 关注

    找到一个中心点进行旋转,canvas也可以,比较麻烦。ui切图最简单。跑一下看看,具体的自己设置旋转角度。有更好的建议欢迎随时点评!有帮助别忘了关注点采纳~~蟹蟹

      <div class="circle-box">
                <div class="circle1">
                    <div class="cc"></div>
                </div>
                <div class="circle1 circle2">
                    <div class="cc1"></div>
                </div>
                <div class="circle1 circle3">
                    <div class="cc"></div>
                </div>
                <div class="circle1 circle4">
                    <div class="cc"></div>
                </div>
                <div class="circle1 circle5">
                    <div class="cc"></div>
                </div>
            </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        .circle-box {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            border: 1px dashed rgb(67, 113, 206);
            position: relative;
            /* box-sizing: border-box; */
            box-sizing: content-box;
            margin: 50px;
    
        }
    
        .circle1 {
            width: 0px;
            height: 0px;
            border-radius: 100%;
            /* border: 1px dashed rgb(67, 113, 206); */
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 50%;
            transform: translateY(-50%);
            transform: rotate(0deg);
        }
    
        .circle2 {
            transform: rotate(45deg);
        }
    
        .circle3 {
            transform: rotate(90deg);
        }
    
        .circle4 {
            transform: rotate(145deg);
        }
    
        .circle5 {
            transform: rotate(190deg);
        }
    
        .cc {
            margin-top: 45px;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: 1px dashed rgb(230, 25, 25);
        }
    </style>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月29日
  • 已采纳回答 3月21日
  • 创建了问题 11月26日

悬赏问题

  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)
  • ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。
  • ¥20 CST怎么把天线放在座椅环境中并仿真