CSS圆形边框填充动画 [英] CSS circle border fill animation

问题描述

我有一个CSS文件，可以完美地制作圆形边框填充动画。其宽度和高度为100px。但是我只需要在50px的宽度和高度圆中使用相同的动画即可。我尝试了很多次以最大程度地减小尺寸，但无法通过动画正确地修复圆圈。请帮助我缩小这个圈子。
我的需要：
宽度50像素
高度-50像素
边框尺寸，按附加的图像文件-圆形边框填充示例图片

I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle. My need: Width-50px Height -50px border size as per the image file attached -circle border fill sample image

我的代码

#loading
{   
  width: 100px;  
  height: 100px;  
  margin: 30px auto;
  position: relative;
}

.outer-shadow, .inner-shadow
{
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.inner-shadow 
{
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.hold 
{
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 100px, 100px, 50px);
  border-radius: 100%;
  background-color: #fff;
}

.fill, .dot span 
{
  background-color: #f50;
}

.fill 
{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}

.left .fill 
{
  z-index: 1;
  -webkit-animation: left 1s linear ;
  -moz-animation: left 1s linear ;
  animation: left 1s linear both;  
}

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

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

.right 
{
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.right .fill 
{  
  z-index: 3;
  -webkit-animation: right 1s linear ;
  -moz-animation: right 1s linear ;
  animation: right 1s linear both ;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

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

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

我在 jsfiddle ...！

推荐答案

您需要将涉及的每个值除以2，甚至是clip（）；那些（小提琴已更新）

You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow,
.inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill,
.dot span {
  background-color: #f50;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'>
  </div>
  <div class='inner-shadow'>
  </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>

</div>

这篇关于CSS圆形边框填充动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！