CSS ONLY Animieren Zeichnen Kreis mit Rahmen-Radius und transparentem Hintergrund

Question

Ich versuche, einen Kreis mit Border-Radius zu zeichnen, und animiere es. Ich kann das tun, aber was ich nicht tun kann, ist Elemente zu überlagern und den Hintergrund der Kreise transparent zu machen, ohne die Maske sichtbar zu machen. Ich bin nicht in der Lage, es über Elemente transparent zu machen, weil die Maske angewendet werden muss, um die linke Hälfte des Kreises zu verbergen, während er sich dreht, um den Zeicheneffekt zu imitieren.

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

http://jsfiddle.net/BuzzSmarter/gmvban4p/

In meinem Beispiel, ich brauche den blauen Hintergrund transparent zu ändern, ohne den border-radius Sichtbarmachen, bevor es zu drehen beginnt.

Entschuldigen Sie die Farben, diese sind nicht das, womit ich arbeiten werde, aber bieten eine klarere Herangehensweise an das Problem.

Dies ist mein temporäres Produkt, wo ich die Zeichnung entfernen muss, um die Transparenz zu erreichen. http://jsfiddle.net/BuzzSmarter/gmvban4p/

Answer 1

Das ist meine Lösung.

stellte ich einen Hintergrund auf Körper

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>

Und dies ist eine Variation transparent ist, auf die Lösung zu zeigen, es nur einmal auf schweben

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>

zu machen laufen