css画圆

最新推荐文章于 2023-11-21 22:54:22 发布

原创最新推荐文章于 2023-11-21 22:54:22 发布 · 824 阅读

1 ·

CC 4.0 BY-SA版权

css画圆专栏收录该内容

1 篇文章

订阅专栏

半圆（不同颜色）

<style>
.half-circle{
    border-width: 100px;
    width: 0px;
    height: 0px;
    border-color:red blue transparent transparent;
    border-style: solid;
    border-radius: 50%;
    transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}
</style>
<body>
    <div class="half-circle"></div>
</body>

2.半圆（只能一种颜色）

<style>
.wrapper{
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.container{
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
}
</style>
<body>
    <div class="wrapper">
        <div class="container"></div>
    </div>
</body>

3.小圆在大圆上圆周运动

<style type="text/css">
    .item{ 
        width:20px; 
        height:20px;
        border-radius:10px;
        background: blue;
        position: absolute;
    }/*border-radius圆角半径*/
    #point{ 
        left:95px; 
        top:295px;
    }
    #centre{ 
        left:195px; 
        top:295px;
    }
    .circle{ 
        width:200px; 
        height:200px; 
        border:1px red solid; 
        border-radius:100px; 
        position: absolute; 
        top:200px; 
        left:100px;
    }
</style>
<body>
    <div id="point" class="item"><big>&nbsp;&nbsp;&nbsp;RUN!</big></div>
    <div id="centre" class="item"></div>
    <div class="circle"></div>
</body>
<script type="text/javascript">
    var r = 100; //半径
    var a = 0;   //角度
    var obj = document.getElementById('point');//js必须写在<body>后面，否则obj=null；
    // 基点坐标为200,300
    setInterval(function(){
        obj.style.left = (190 - Math.cos(a) * r) + 'px';/*style 很重要*/
        obj.style.top = (290 - Math.sin(a) * r) + 'px';
        a += 0.1; //角度随时增大，产生绕圈的效果
    }, 100);//every 100/1000s run function() one time;
</script>

4.画出一个内半径为10px，外边框白色1px的纯红色圆圈

<style>
.container{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    border-color: white;
}
</style>
<body>
    <div class="container"></div>
</body>