html 中画半圆的方法

html 中画半圆的方法

<style>

        div{
            display: inline-block;

        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        #one{
            transform: rotate(100deg);

        }
        #two{

            transform: rotate(100deg);

        }
        .left-circle{
            width: 100px;
            height: 200px;
            border-radius: 100px 0 0 100px;
            transform-origin: 100px 100px;
        }
        .right-circle{
            width: 100px;
            height: 200px;
            border-radius: 0 100px 100px 0;
            margin-left: -5px;
            transform-origin: 0 100px;

        }
        /*.up-circle{*/
        /*    height: 100px;*/
        /*    width: 200px;*/
        /*    border-radius: 100px 100px 0 0;*/
        /*    transform: rotateZ(180deg);*/
        /*}*/
        /*.down-circle{*/
        /*     height: 100px;*/
        /*    width: 200px;*/
        /*    border-radius: 0 0 100px 100px;*/
        /*}*/

    </style>



<body>

<div id = 'app' >
    <div class="left-circle red" :style='one' id ='d1'>
    </div>
    <div class="right-circle green" :style="two"  >
    </div>
</div>
</body>


<script src="js/vue.js"></script>
<script>
    let count=0;

    let app = new Vue({
        el: '#app',
        data: {
            // transform:rotate(190deg);
            one: {transform: 'rotate(' + count + 'deg)'},
            two: {transform: 'rotate(' + count + 'deg)'},

        },
    });
    setInterval(function(){

                    count=count+20;
                    app.one.transform = 'rotate('+count+'deg)';
                    app.two.transform = 'rotate('+count+'deg)';
                    console.log(count);
                    }, 1);


</script>
posted @ 2019-11-12 09:48  cheng825  阅读(300)  评论(0编辑  收藏