Html CSS ONLY Animate Draw Circle with border-radius and透明背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26807610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS ONLY Animate Draw Circle with border-radius and transparent background
提问by BuzzSmarter
I am trying to draw a circle with border-radius, and animate it. I can do this, but what i can't do is overlay elements and set the circles background to transparent, without unhiding the mask. I am not able to make it transparent over elements because the mask needs to be applied to hide the left half of the circle as it rotates to mimic the draw effect.
我正在尝试绘制一个带有边界半径的圆，并为其设置动画。我可以做到这一点，但我不能做的是覆盖元素并将圆圈背景设置为透明，而不隐藏蒙版。我无法使它在元素上透明，因为需要应用蒙版来隐藏圆圈的左半部分，因为它旋转以模仿绘制效果。
HTML
HTML
<div class="background">
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
</div>
CSS
CSS
.background{
background:green;
z-index: 1000;
}
.wrapper {
width: 250px;
height: 250px;
position: relative;
margin: 40px auto;
background: rgba(0,0,255,1);
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: transparent;
border: 5px solid rgba(0,0,0,0.9);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 0;
border-right: none;
-webkit-animation: rota 5s linear infinite;
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
-webkit-animation: opa 5s steps(1, end) infinite reverse;
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
-webkit-animation: opa 5s steps(1, end) infinite;
}
@-webkit-keyframes rota {
0% {transform: rotate(0deg);border-color:red;}
100% {transform: rotate(360deg);z-index:0;}
}
@-webkit-keyframes opa {
0% {opacity: 1;}
50%, 100% {opacity: 0;}
}
http://jsfiddle.net/BuzzSmarter/gmvban4p/
http://jsfiddle.net/BuzzSmarter/gmvban4p/
In my example, I need to change the blue background to transparent, without unhiding the border-radius before it starts rotating.
在我的示例中，我需要将蓝色背景更改为透明，而不是在开始旋转之前取消隐藏边界半径。
Excuse the colors, these are not what I will be working with, but provide a clearer approach to the issue.
请原谅颜色，这些不是我将要使用的，但提供了一个更清晰的方法来解决这个问题。
This is my temporary product where I have to remove the draw to accomplish the transparency. http://jsfiddle.net/BuzzSmarter/gmvban4p/
这是我的临时产品，我必须删除绘图才能完成透明度。 http://jsfiddle.net/BuzzSmarter/gmvban4p/
回答by vals
This is my solution.
这是我的解决方案。
I set a background on body to show it is transparent
我在身体上设置了背景以显示它是透明的
body {
background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
height: 500px;
background-size: 500px 500px;
background-repeat: no-repeat;
}
html {
height: 100%;
}
#container {
position: absolute;
width: 400px;
height: 400px;
border: solid red 1px;
animation: colors 4s infinite;
}
#halfclip {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
animation: cliprotate 16s steps(2) infinite;
-webkit-animation: cliprotate 16s steps(2) infinite;
}
.halfcircle {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 25px 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(135deg);
animation: showfixed 16s steps(2) infinite;
-webkit-animation: showfixed 16s 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;}
}<div id="container">
<div id="halfclip">
<div class="halfcircle" id="clipped">
</div>
</div>
<div class="halfcircle" id="fixed">
</div>
</div>And this is a variation on the solution, to make it run only once on hover
这是解决方案的一个变体，让它在悬停时只运行一次
body {
background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
height: 500px;
background-size: 500px 500px;
background-repeat: no-repeat;
}
html {
height: 100%;
}
#container {
position: absolute;
width: 300px;
height: 300px;
border: solid red 1px;
}
#halfclip {
width: 50%;
height: 100%;
right: 0px;
position: absolute;
overflow: hidden;
transform-origin: left center;
}
#container:hover #halfclip {
animation: cliprotate 6s 1;
transform: rotate(180deg);
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
50% {transform: rotate(0deg);}
50.01% {transform: rotate(180deg);}
100% {transform: rotate(180deg);}
}
.halfcircle {
box-sizing: border-box;
height: 100%;
right: 0px;
position: absolute;
border: solid 25px transparent;
border-top-color: blue;
border-left-color: blue;
border-radius: 50%;
}
#clipped {
width: 200%;
transform: rotate(-45deg);
}
#container:hover #clipped {
transform: rotate(135deg);
animation: rotate 3s linear 2;
}
@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
#fixed {
width: 100%;
transform: rotate(135deg);
opacity: 0;
}
#container:hover #fixed {
opacity: 1;
animation: showfixed 6s 1;
}
@keyframes showfixed {
0% {opacity: 0;}
49.99% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}<div id="container">
<div id="halfclip">
<div class="halfcircle" id="clipped">
</div>
</div>
<div class="halfcircle" id="fixed">
</div>
</div>