那样的话可以定位一个图片上去，
也可以定位一个大圆圈，漏出一个部分那个圆圈之后，在给他的父级一个overflow：hidden
把大圆圈不需要的部分隐藏就行了。
使用定位来做。首先给这个圆的父级：position: relative
然后给圆设置：position: absolutetop：50%；left：0；transform: translateY(-50%)
这样就可以了，
主要是使用box-shadow偏移核心代码: box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.42em #56c29e, -0.11em -0.83em 0 -0.44em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.477em #56c29e
这个效果是动态的,请复制下面所有代码到html里，运行网页即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.load {
width: 1.3em
height: 1.3em
border-radius: 20px
animation: xuanzhuan 2s infinite
background: red
margin: 48% auto
zoom: 3.0
}
@keyframes xuanzhuan {
0% {
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
5%,
95% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
30% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.51em -0.66em 0 -0.46em #56c29e, -0.75em -0.36em 0 -0.52em #56c29e, -0.83em -0.03em 0 -0.58em #56c29e, -0.81em 0.21em 0 -0.70em #56c29e
}
55% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.29em -0.78em 0 -0.46em #56c29e, -0.43em -0.72em 0 -0.52em #56c29e, -0.52em -0.65em 0 -0.58em #56c29e, -0.57em -0.61em 0 -0.70em #56c29e
}
100% {
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
}
</style>
</head>
<body>
<div class="load">
</div>
</body>
</html>
