CSS圓形邊框填充動畫

Question

我有一個css文件，它可以使圓形邊框填充動畫完美。它的寬度和高度都是100px。但我只需要在50px寬度和高度圓與相同的動畫。我嘗試了很多次以儘量減少大小，但圓圈沒有正確地使用動畫修復。請幫我縮小這個圈子。 我需要： 寬度-50px的 身高-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個參與，甚至剪輯每個值除以（）;像[這]父元素（https://jsfiddle.net/hari_shanx/rsfkmegp/上規模（0.5）`：那些(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

這是你所期望的，希望這會有助於you.try this.I只關心圓圈大小50像素與內圈。如果不是這種情況告訴我。

<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>