小圆环怎么画呢

小圆环怎么画呢

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>2-5</title>

    <style type="text/css">

        div {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            box-sizing: border-box;

            width: 400px;

            height: 400px;

            margin: auto;

            border: 1px solid red;

            border-bottom: 200px solid red;

            border-radius: 50%;

            transform-origin: 50% 50%;

            animation-name: rotate;

            animation-duration: 5s;

            animation-timing-function: linear;

            /*此处写代码*/

            -webkit-animation-duration:30s;

                    animation-duration:30s;

            -webkit-animation-iteration-count:infinite;

                    animation-iteration-count:infinite;

        }

         div::after{

            content: ".";

            width: 200px;

            height: 200px;

            background: red;

            border-radius: 50%;

            position: absolute;

            top: 50%;

            left: 50%;

        }

        div::before{

            content: ".";

            width: 200px;

            height: 200px;

            background: white;

            border-radius: 50%;

            position: absolute;

            top: 50%;

        }

        @keyframes rotate{

            from{transform: rotate(3600deg);}

              to{transform: rotate(0deg);}

        }

        

    </style>

</head>

<body>

    <div></div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
Miss路 2019-07-14 19:08:35

同学,你好。小圆圈可以用伪类去画,

http://img1.sycdn.imooc.com//climg/5d2b0d290001113204990610.jpg

如果帮助到了你,欢迎采纳!

祝学习愉快!

  • 提问者 慕虎6206582 #1
    我用伪类画了两个大半圆 不能改变位置和大小去画小圆 我看你们的例子好像都是用伪类画的小圆 那你们的大半圆是怎么画出来的
    2019-07-17 20:32:02
  • Miss路 回复 提问者 慕虎6206582 #2
    http://class.imooc.com/course/qadetail/134107可以看看这个同学写的。也可以在问答区看看其他同学的实现方式。 祝学习愉快!
    2019-07-18 10:39:10
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码