반원형 애니메이션을 채우십시오.

Question

Yahoo Weather 앱에서 본 애니메이션을 보았습니다. 나는 그것이 멋지다라고 생각한다. 그리고 나는 그것을 만들고 싶다.

는 지금은 반원을 만들고 CSS의 키 프레임

@-webkit-keyframes rotatekey { 
from {-webkit-transform: rotate(0deg);} 
to {-webkit-transform: rotate(360deg);} 
} 

.rotate { 
-webkit-animation-name: rotatekey; 
-webkit-animation-duration: 7s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
} 

를 사용하여 곡선 경로를 따라 실행 일을하지만 난 노란색 영역 CSS를 및 자바 스크립트를 사용하여 반원을 채우기 만드는 방법을 알고 싶어? 외부 반원은 투명 영역입니다.

Answer 1

키 프레임 애니메이션을 사용하여이 효과를 얻을 수 있습니다.

.wrapper { 
 
    border-top-left-radius: 500px; 
 
    border-top-right-radius: 500px; 
 
    width: 500px; height: 250px; 
 
    overflow: hidden; 
 
    border: 3px dashed gold; 
 
    border-bottom: none; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 100px; height: 100%; 
 
    background: gold; 
 
    -webkit-animation: fill 7s linear infinite; 
 
    animation: fill 7s linear infinite; 
 
} 
 
@-webkit-keyframes fill { 
 
    from { width: 0; } 
 
    to { width: 100%; } 
 
} 
 
@keyframes fill { 
 
    from { width: 0; } 
 
    to { width: 100%; } 
 
}

<div class="wrapper"></div>

Answer 2

이 시도 :

이 데모에서는, 나는 부모를 "채우기"로 작성 모양을 만들 의사 요소를 사용하고 의사 요소의 폭 애니메이션

<div class="wrapper"> 
    <div class="semicircle"> 
    <div class="fill"></div> 
    </div> 
</div> 

.wrapper { 
    margin: 1rem; 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
    border-bottom: 2px solid #AAA; 
} 
.wrapper .semicircle { 
    border: 2px solid #AAA; 
    width: 400px; 
    height: 400px; 
    border-radius: 200px; 
    box-sizing: border-box; 
    overflow: hidden; 
} 
.wrapper .semicircle .fill { 
    background: rgba(200, 192, 32, 0.5); 
    width: 0%; 
    height: 200px; 
    transition: width 1s ease-in-out; 
} 
.wrapper .semicircle:hover .fill { 
    width: 100%; 
} 

데모 : http://cssdeck.com/labs/pbnpqheh

Answer 3

다음은 노란색이 옆으로 채우는 대신 통해 회전 대안이다 :

HTML (만세 의사 요소!) :

<div id="horizon"></div> 

CSS :

#horizon:before { 
    content: ""; 
    position: absolute; 
    width: 400px; 
    height: 400px; 
    background: transparent; 
    border:5px dashed #eee; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
} 

#horizon{ 
    width:410px; 
    height:200px; 
    position:relative; 
    overflow:hidden; 
} 

#horizon:after { 
    content: ""; 
    position: absolute; 
    width: 400px; 
    height: 200px; 
    top:5px; 
    left:5px; 
    background: yellow; 
    -moz-border-radius: 400px 400px 0 0; 
    -webkit-border-radius: 400px 400px 0 0; 
    border-radius: 400px 400px 0 0; 
    -webkit-transform-origin: bottom; 
    -moz-transform-origin: bottom; 
    transform-origin: bottom; 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
} 
@-moz-keyframes rotate { 
    from {-moz-transform:rotateZ(180deg);} 
    to {-moz-transform:rotateZ(360deg)} 
} 

@-webkit-keyframes rotate { 
    from {-webkit-transform:rotateZ(180deg);} 
    to {-webkit-transform:rotateZ(360deg)} 
} 

바이올린 : http://jsfiddle.net/Mp4sZ/