Jquery 填充半圆动画

我从雅虎天气应用程序中看到了这个动画。我觉得很酷，我想去

现在我创建了半圆，并使用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{
边框左上半径：500px；
边框右上角半径：500px；
宽度：500px；高度：250px；
溢出：隐藏；
边框：3件金色虚线；
边框底部：无；
}
.包装工：之后{
内容：''；
显示：块；
宽度：100px；高度：100%；
背景：金；
-webkit动画：填充7s线性无限；
动画：填充7s线性无限；
}
@-webkit关键帧填充{
从{宽度：0；}
到{宽度：100%；}
}
@关键帧填充{
从{宽度：0；}
到{宽度：100%；}
}

试试这个：

.wrapper{
保证金：1rem；
宽度：400px；
高度：200px；
溢出：隐藏；
边框底部：2倍实心#AAA；
}
.wrapper.半圆{
边框：2倍实心#AAA；
宽度：400px；
高度：400px；
边界半径：200px；
框大小：边框框；
溢出：隐藏；
}
.wrapper.半圆.填充{
背景：rgba（200,192,32,0.5）；
宽度：0%；
高度：200px；
过渡：宽度1s，易于进出；
}
.wrapper.半圆：悬停。填充{
宽度：100%；
}

---

演示：

这里有一个替代方案，其中黄色旋转而不是横向填充：

HTML（伪元素万岁！）：

---

Fiddle:

您已经用上面的代码制作了动画！：）问题是如何使黄色区域从左到右跟随太阳生长。我不是CSS专家，但我会准备两张图片：一张是空的半圆，另一张是填充的半圆。然后把一个放在另一个上面，操纵它们的宽度。为什么不制作一个圆角和溢出隐藏为半圆的div，将黄色表面作为div放在里面，从左到右或从0到100%的宽度设置动画？不需要图像我将创建一个单独的div，因为：after可能缺少compatibility@Alex，浏览器对伪元素的兼容性非常好（），并且达到了IE8，我认为它足够好，可以在大多数项目中使用它OP使用的关键帧动画甚至不受IE9支持，所以我认为浏览器对伪元素的支持与OP的情况无关。@WebTiki我尝试过了，对我来说效果很好！非常感谢。我想问你更多的问题，我怎样才能让太阳移动并相应地填充半圆？@Giffary太阳动画是如何触发的？@web tiki检查我的代码

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

#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)}
}