css画圆

来源：互联网发布：小米网络电视怎么用编辑：程序博客网时间：2024/06/05 14:48

半圆（不同颜色）

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

阅读全文

0 0