如何创建一个半圆的css?

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

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

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

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

请问这个圆环带一个点,这个如何实现?

阅读 3.1k
3 个回答

图片描述

<!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>

考虑用SVG试试看

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏