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 和javascript使黄色区域填充半圈？外半圈是透明区域。

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/

填充半圈动画

3 个答案: