logo标签列表

CSS圆形边框填充动画

cssanimationbordergeometry
3
我有一个CSS文件，可以完美地制作圆形边框填充动画。它的宽度和高度都是100像素。但是我只需要一个宽度和高度为50像素的圆形，具有相同的动画效果。我尝试了很多次来缩小大小，但是圆形没有与动画正确地对齐。请帮助我缩小这个圆形。 我的需求： 宽度-50像素 高度-50像素 边框大小与附加的图像文件相同-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上的代码...!

1
我建议您在父元素上使用 transform: scale(0.5)，就像这样。这将使圆的大小减半，而无需进行任何其他更改。 - Harry
@Harry..... 感谢您的帮助，Harry先生... transform: scale(0.5) 很好用..非常棒.. - ArunValaven
2个回答
11
您需要将涉及的每个值除以2，即使是clip();的值 (已更新的代码片段) 

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

编辑：回复@Filipe评论

从clip到clip-path的变化会是什么样子？我尝试了（也将rect更改为inset），但动画停止工作了。

使用clip-path代替clip的可能示例。

#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-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
  border-radius: 100%;
  background-color: #fff;
}

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

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

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

感谢您出色的工作。它与我需要的小圆圈一起工作。谢谢GCyrillus先生。 - ArunValaven
嗨，这个在Safari浏览器上除外都工作正常，你能给我一个Safari的解决方案吗？ - Muthukumar
1
更新2019年：CSS的clip属性已经被弃用。你应该使用clip-path代替 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip#See_also。 - S. Esteves
从clip改为clip-path会有什么变化？我尝试过（同时将rect更改为inset），但动画停止工作了。 - Filipe
1
@Filipe 我在我的答案中添加了一个片段，使用 clip-path 而不是 clip。为了帮助你绘制 clip-path，这里有一个在线工具 https://bennettfeely.com/clippy/ - G-Cyrillus
0

这是您期望的吗？希望对您有所帮助。请尝试一下。我只关心内部圆形大小为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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接