时间戳

首页 > 解决方案 > 如何反转这个圆圈动画？

css - 如何反转这个圆圈动画？

问题描述

我在网上找到了这段代码片段，我试图将其反转，以便圆圈从 0% 的全白渐变到 100% 的渐变圆圈，然后停止动画。但是我似乎无法弄清楚倒车部分。我试过摆弄这些值，但似乎无法获得预期的效果。摆脱渐变部分未显示后仍然存在的小轮廓也很好。干杯 

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;

  background: linear-gradient(90deg, #fdbd39,#ee6723,#E06387);
  border-radius: 200px;

  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;

}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 10s infinite linear;
  -webkit-animation: loading-left 10s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 10s infinite linear;
  -webkit-animation: loading-right 10s infinite linear;
}

@keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
    100% {
    -webkit-transform: rotate(180deg);
  }

}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }

}
        <div class="container mt-5">
            <div class="row">
              <div class="col-3">
                <div id="circle-loader-wrap">
                  <div class="left-wrap">
                    <div class="loader"></div>
                  </div>
                  <div class="right-wrap">
                    <div class="loader"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

标签： csstransformwebkit-transformwebkit-animation

解决方案

@keyframesCSS 是这个加载动画的棘手部分。

您可以使用开发工具检查这两个元素，.left-wrap>.loader并且.right-wrap>.loader. 一旦.loader元素与其容器（.left-wrap或.left-wrap）重叠，它就会隐藏渐变圆。

这个动画的关键点是这两个loader元素的关键帧和旋转度数。

以左半圆和下面的代码为例，在这种情况下，左半圆的可见性由.right-wrap和控制.right-wrap>.loader。旋转.right-wrap>.loader180 度时，不与其容器重叠，整个左半边可见。 加载动画描述

当我们减少旋转时，重叠部分.right-wrap>.loader及其容器会增加，从而隐藏了一些圆圈。 加载动画描述

此外，为了控制旋转的时机（圆的哪个部分，左或右，先执行旋转），关键帧分为2部分，0%-50%（第一部分）和50%-100% （第二部分）。

如果我们在关键帧0%和50%关键帧中设置相同的旋转，则元素不会在动画的第一部分旋转。从这个概念你还可以看出，如果50%和100%保持相同的旋转，动画的第二部分没有呈现旋转。

要控制顺时针或逆时针，重要的是要知道旋转开始的度数和旋转的度数。对于顺时针动画，旋转应该从 180 度开始并以 360 度结束，而对于逆时针动画，它应该从 180 度开始并以 0 度结束。

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;

  background: linear-gradient(90deg, #fdbd39,#ee6723,#E06387);
  border-radius: 200px;

  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;

}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 10s infinite linear;
  -webkit-animation: loading-left 10s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 10s infinite linear;
  -webkit-animation: loading-right 10s infinite linear;
}

@keyframes loading-left {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
    100% {
    -webkit-transform: rotate(360deg);
  }

}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }

}
        <div class="container mt-5">
            <div class="row">
              <div class="col-3">
                <div id="circle-loader-wrap">
                  <div class="left-wrap">
                    <div class="loader"></div>
                  </div>
                  <div class="right-wrap">
                    <div class="loader"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

推荐阅读