CSS圈边框填充动画

Question

我有一个css文件，可以完美地制作圆圈边框。它的宽度和高度均为100px。但我只需要50px宽度和高度的圆圈与相同的动画。我尝试了很多次来最小化尺寸，但圆圈没有得到正确的动画修复。请帮我缩小这个圈子。 我的需要： 宽度50像素 高度-50px 根据附加的图像文件的边框大小 - 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 ...！

Answer 1

你需要将所涉及的每个值除以2，即使是clip（）; (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>

Answer 2

这就是你所期望的，希望这会对你有所帮助。试着这个。我只关心50圈内圈的圆圈大小。如果不是这样告诉我。

＆＃13;

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>

<style type="text/css">
  div.circleone{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 1px 2px 1px black;

  }

  div.circletwo
  {
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    box-shadow: 1px -1px 1px black;
    position: relative;
    top: 25%;
    left: 25%;


  }

</style>

</head>

<body>

<div class="circleone">
  <div class="circletwo"></div>
</div>



</body>
</html>

＆＃13;

＆＃13;

＆＃13;