如何创建一个半圆的css？

是这样的，我想实现这样的功能
图片描述

大背景我打算用背景图片解决，因为是固定不变的，里边的温度数字我也可以设置居中，但是这个小的

这个指示，这是动态的，所以不能做成背景图片。

我想实现的功能就是这个小圆圈，指示器，可以沿着这个圆圈一直动，首先要做出这个圆圈和这个圆环的指示来，剩下的动画我觉得我百度能自己解决。

请问这个圆环带一个点，这个如何实现？

阅读 3.1k

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arc</title>
    <style type="text/css">
    .box {position:relative;margin:100px;width:200px;height:200px;border-radius:50%;overflow:hidden;}
    .box .pie {position:absolute;bottom:50%;left:50%;width:100%;height:100%;background-color:rgba(0,0,0,0.3);box-sizing:border-box;}
    .box .pie-1 {background-color:RGB(218,106,78);transform-origin:left bottom;transform:rotate(0deg)  skew(-30deg);}
    .box .pie-2 {background-color:RGB(244,181,91);transform-origin:left bottom;transform:rotate(-60deg)  skew(-30deg);}
    .box .pie-3 {background-color:RGB(138,192,101);transform-origin:left bottom;transform:rotate(-120deg) skew(-30deg);}
    .box .pie-4 {background-color:RGB(126,200,221);transform-origin:left bottom;transform:rotate(-180deg) skew(-30deg);}
    .box .pie-5 {background-color:RGB(244,181,91);transform-origin:left bottom;transform:rotate(-240deg) skew(-30deg);}
    .box .pie-6 {background-color:RGB(206,72,71);transform-origin:left bottom;transform:rotate(-300deg) skew(-30deg);}
    .box .pie-bottom {border:3px solid #FFF;}
    .box .base {position:absolute;top:10px;left:10px;width:180px;height:180px;border-radius:50%;border:5px solid #FFF;box-sizing:border-box;}
    .box .info {position:absolute;top:1px;left:1px;width:168px;height:168px;border-radius:50%;background-color:#FFF;box-sizing:border-box;}
    .box .dot {position:absolute;margin-top:-5px;margin-left:-5px;top:100px;left:184px;width:10px;height:10px;border-radius:50%;background-color:#000;transform-origin:-79px center;transform:rotate(-130deg);}
    .box .patch {position:absolute;bottom:0;left:50%;width:106px;transform-origin:center bottom;transform:translate(-50%, 0);border-left: 14px solid transparent;border-right:14px solid transparent;border-bottom:28px solid RGB(244,181,91);box-sizing:border-box;}
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function(){

        let domDot = document.querySelector('.box .dot');
        let dotDeg = 0;

        function update_dot()
        {
            domDot.style.transform = 'rotate('+dotDeg+'deg)';

            dotDeg += 5;
            if(dotDeg >= 360)
                dotDeg = dotDeg % 360;
            if(dotDeg >= 60 && dotDeg <= 120)
                dotDeg = 120;

            setTimeout(update_dot, 250);
        }

        setTimeout(update_dot, 0);
    });
    </script>
</head>
<body>
<div class="box">
    <div class="pie pie-1"></div>
    <div class="pie pie-2"></div>
    <div class="pie pie-3"></div>
    <div class="pie pie-4"></div>
    <div class="pie pie-5 pie-bottom"></div>
    <div class="pie pie-6"></div>
    <div class="base">
        <div class="info"></div>
    </div>
    <div class="dot"></div>
    <div class="patch"></div>
</div>
</body>
</html>

如何创建一个半圆的css？

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

如何创建一个半圆的css？

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

如何实现前端视频流的处理和优化？