vue组件
<template>
<div class='container'>
<div class="left">
<div class="leftcircle"></div>
</div>
<div class="right">
<div class="rightcircle"></div>
</div>
</div>
</template>
<script>
export default {
mounted(){
},
methods: {
}
}
</script>
<style lang="scss">
.container{
display:flex;
width: 160px;
height: 160px;
}
.left{
width: 79px;
height: 160px;
position: relative;
overflow: hidden;
background: pink;
}
.leftcircle{
width: 160px;
height: 160px;
border: 20px solid white;
position: absolute;
border-radius: 50%;
left: 0px;
top:0px;
border-bottom: 20px solid orange;
border-left: 20px solid orange;
transform: rotate(45deg);
animation-name:circle_left;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.right {
width: 79px;
height: 160px;
position: relative;
overflow: hidden;
background-color: pink;
}
.rightcircle {
width: 160px;
height: 160px;
border-radius: 50%;
border: 20px solid white;
position: absolute;
border-top: 20px solid orange;
border-right: 20px solid orange;
right: 0px;
top: 0px;
animation-name: circle_right;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: rotate(-135deg);
}
@keyframes circle_right {
0% {
transform: rotate(-135deg);
}
50%,100% {
transform: rotate(45deg);
}
}
@keyframes circle_left {
0%,50% {
transform: rotate(-135deg);
}
100% {
transform: rotate(45deg);
}
}
</style>