CSS CHỈ Animate Vẽ vòng tròn với bán kính đường viền và nền trong suốt

Question

Tôi đang cố gắng vẽ một vòng tròn có bán kính đường viền và tạo hiệu ứng động. Tôi có thể làm điều này, nhưng những gì tôi không thể làm là các phần tử lớp phủ và đặt nền vòng tròn thành trong suốt, mà không làm ẩn mặt nạ. Tôi không thể làm cho nó trong suốt hơn các yếu tố bởi vì mặt nạ cần phải được áp dụng để ẩn nửa bên trái của vòng tròn khi nó quay để bắt chước hiệu ứng vẽ.

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/

Trong ví dụ của tôi, tôi cần phải thay đổi nền màu xanh để minh bạch, không khi hiện các border-radius trước khi nó bắt đầu quay.

Xin lỗi màu sắc, đây không phải là những gì tôi sẽ làm việc, nhưng cung cấp cách tiếp cận rõ ràng hơn cho vấn đề.

Đây là sản phẩm tạm thời của tôi, nơi tôi phải xóa bản vẽ để hoàn thành tính minh bạch. http://jsfiddle.net/BuzzSmarter/gmvban4p/

Answer 1

Đây là giải pháp của tôi.

tôi thiết lập một nền tảng về cơ thể để hiển thị nó là minh bạch

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>

Và đây là một biến thể của các giải pháp, để làm cho nó chỉ chạy một lần trên di chuột

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>