CSS仅对具有边框半径和透明背景的Draw Circle进行动画处理

Question

我正在尝试绘制一个带有边框半径的圆并为其设置动画。我可以这样做，但是我不能做的是覆盖元素并将圆形背景设置为透明，而无需取消隐藏蒙版。我无法使它在元素上透明，因为在旋转模拟模仿效果时，需要应用遮罩以隐藏圆的左半部分。

HTML

<div class="background">
    <div class="wrapper">
        <div class="pie spinner"></div>
        <div class="pie filler"></div>
        <div class="mask"></div>
    </div>
</div>

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;}
}

在我的示例中，我需要将蓝色背景更改为透明，在开始旋转之前不取消隐藏边框半径。

请原谅这些颜色，这些不是我要使用的颜色，但是可以提供一种更清晰的解决方法。

这是我的临时产品，在这里我必须删除抽奖以实现透明度。

Answer 1

这是我的解决方案。

我在身体上设置背景以显示它是透明的

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>

这是解决方案的一种变体，它只能在悬停时运行一次

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>