<分区>
我在 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 和 javascript 使黄色区域填充半圆？半圈外为透明区域。
最佳答案
您可以使用关键帧动画实现此效果。在此演示中，我使用了一个伪元素来创建填充形状并动画化该伪元素的宽度以“填充”父元素:
.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>关于jquery - 填满半圆动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24204792/