仅限CSS动画-使用边框半径和透明背景绘制圆
要绘制具有透明背景和边框半径的圆，请使用以下CSS-
body {
background: repeating-linear-gradient(45deg, white 0px, green 100px);
height: 400px;
background-size: 400px 400px;
background-repeat: no-repeat;
}
html {
height: 100%;
}
#box {
position: absolute;
width: 400px;
height: 400px;
border: solid blue 2px;
animation: colors 5s infinite;
}
#demo {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
animation: cliprotate 18s steps(2) infinite;
-webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 20px transparent;
border-top-color: blue;
border-left-color: blue;
border-radius: 50%;
}
#clipped {
width: 200%;
animation: rotate 8s linear infinite;
-webkit-animation: rotate 8s linear infinite;
}
#fixed {
width: 100%;
transform: rotate(145deg);
animation: showfixed 18s steps(2) infinite;
-webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
0% {opacity: 0;}
49.9% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}以下是我们的HTML5Canvas-
<div id = "box">
<div id = "demo">
<div class = "circlehalf" id = "clipped">
</div>
</div>
<div class = "circlehalf" id = "fixed">
</div>
</div>