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>
