填充半圆动画[关闭]答案

【问题标题】：Fill a half circle animation [closed]填充半圆动画[关闭]
【发布时间】：2014-08-03 23:34:07
【问题描述】：

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

现在我创建了半圆并使用 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 填充半圆？外半圈是透明区域。

【问题讨论】：

你已经用上面的代码做了动画！ :) 有什么问题
问题是如何让黄色区域从左到右跟随太阳生长。
我不是 CSS 专家，但我会准备两张图片：一张是空的半圆，第二张是实心的。然后把一个放在另一个上并调整它们的宽度。
你为什么不做一个圆角的div，溢出隐藏为半圆，把黄色的表面作为div放在里面，从左到右或宽度从0到100%？不需要图片

标签： jquery html css css-animations css-shapes

【解决方案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%; }
}

&lt;div class="wrapper"&gt;&lt;/div&gt;

【讨论】：

我会创建一个单独的 div，因为 :after 可能缺乏兼容性
@Alex，浏览器对伪元素的兼容性非常好（caniuse.com/css-gencontent）并且可以升级到 IE8 我认为在大多数项目中使用它已经足够好了。 + OP 正在使用关键帧动画，即使 IE9 也不支持，所以我认为浏览器对伪元素的支持与 OP 的情况无关。
@web-tiki 我试过了，它对我来说很好用！谢谢！我想问你更多问题，我怎样才能让太阳相应地填充半圆？
@Giffary 太阳动画是怎么触发的？
@web-tiki 检查我的代码jsfiddle.net/webtiki/JhxsT

【解决方案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

【讨论】：

【解决方案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/

【讨论】：