CSS SADECE Kenarlık yarıçapı ve saydam arka planlı Draw Circle (Animasyon Çizgisi) Animasyon

Question

Kenarlıklı bir daire çizmeye çalışıyorum ve canlandırın. Bunu yapabilirim, ama yapamayacağım şey, maskeyi gizlemeden, elemanların üst üste bindirilmesi ve çevrelerin arka planını saydamlaştırmaktır. Bunu, elemanlar üzerinde şeffaf hale getiremiyorum çünkü maske, etkiyi taklit etmek için dönerken dairenin sol yarısını gizlemek için uygulanmalıdır.

HTML

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

CSS benim örnekte

.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/

, ben dönmeye başlamadan önce border-radius gösterdikten olmadan şeffaf mavi arka plan değiştirmek gerekir.

Renkleri istismar ediyorum, bunlar ne ile çalışacağım değil, ancak konuya daha açık bir yaklaşım getiriyor.

Bu, saydamlığı gerçekleştirmek için çekimi kaldırmam gereken geçici ürünümdür. http://jsfiddle.net/BuzzSmarter/gmvban4p/

Answer 1

Bu benim çözümümdür.

Ben

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>

saydamdır göstermek için vücut üzerinde bir arka plan ayarlamak Ve bu, bu vurgulu üzerinde yalnızca bir kez çalıştırmak yapmak için çözüm üzerinde bir varyasyonu

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>