使用CSS依次展开圆形 [英] Expand circles sequentially using CSS

查看：118 发布时间：2017/1/20 20:54:10 html css css3 css-animations

本文介绍了使用CSS依次展开圆形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个圆形的钟面，我想要在1秒后顺序出现，所以从零开始，然后在1秒，第二个，然后1秒，第三个等等之后增长第一个到全尺寸。（圈子需要中心扩展）

这是我的圈子（总共有12个像这样）：

 < div id =study-area> 
< a class =research-circle rs-<？php echo $ counter;？> href =<？php echo the_permalink（）;？> style =background-image：url（<？php echo the_field（'icon'）;？>）;>< / a> 
< / div>

每个圈子类别上有一个计数器输出1,2,3等到12。

如何使用CSS顺序展开每个圆？此时，每个圆圈都会从左上方展开，同时全部展开！

 ＃research-area {
 height：883px; 
 width：980px; 
 position：relative; 
} 
 .research-circle {
 height：156px; 
 width：174px; 
 display：block; 
 position：absolute; 
 -webkit-transform：scale（1）; 
 -moz-transform：scale（1）; 
 -o-transform：scale（1）; 
 -ms-transform：scale（1）; 
 transform：scale（1）; 
} 
 .research-circle：hover {
 -webkit-transform：scale（1.1）; 
 -moz-transform：scale（1.1）; 
 -o-transform：scale（1.1）; 
 -ms-transform：scale（1.1）; 
 transform：scale（1.1）; 
} 
 .research-circle {
 -webkit-animation：circle 1s; 
 -moz-animation：circle 1s; 
 -o-animation：circle 1s; 
 animation：circle 1s; 
} 
 @keyframes circle {
 0％{
 height：0px; 
 width：0px; 
} 
 100％{
 height：156px; 
 width：174px; 
} 
} 
 @ -webkit-keyframes circle {
 0％{
 height：0px; 
 width：0px; 
} 
 100％{
 height：156px; 
 width：174px; 
} 
} 
 @ -moz-keyframes circle {
 0％{
 height：0px; 
 width：0px; 
} 
 100％{
 height：156px; 
 width：174px; 
} 
} 
 @ -o-keyframes circle {
 0％{
 height：0px; 
 width：0px; 
} 
 100％{
 height：156px; 
 width：174px; 
} 
} 
 @keyframes circle {
 0％{
 height：0px; 
 width：0px; 
} 
 100％{
 height：156px; 
 width：174px; 
} 
} 
 .rs-1 {
 left：393px; 
 top：-2px; 
} 
 .rs-2 {
 left：578px; 
 top：47px; 
} 
 .rs-3 {
 left：713px; 
 top：183px; 
} 
 .rs-4 {
 left：763px; 
 top：367px; 
} 
.rs-5 {
 left：713px; 
 top：551px; 
} 
 .rs-6 {
 left：578px; 
 top：687px; 
} 
 .rs-7 {
 left：394px; 
 top：736px; 
} 
 .rs-8 {
 top：687px; 
 left：209px; 
} 
 .rs-9 {
 left：73px; 
 top：551px; 
} 
 .rs-10 {
 left：24px; 
 top：367px; 
} 
 .rs-11 {
 left：74px; 
 top：182px; 
} 
 .rs-12 {
 left：208px; 
 top：47px; 
}

解决方案

界。所有你需要做的是添加一个 animation-delay ，相当于前面的元素完成动画所需的时间。因此，第一个圆应该没有动画延迟，第二个应该有1s延迟，第三个应该有2s延迟等等（因为每个周期的 animation-duration 为1s）。

  .research-circle {display：inline-block; height：50px; width：50px; border-radius：50％; border：2px solid; text-align：center; text-decoration：none; line-height：50px;动画：缩放1s linear 1 backwards;}。rs-1 {animation-delay：0s;}。rs-2 {animation-delay：1s;} rs-3 {animation-delay：2s;}。 animation-delay：3s;} @ keyframes scale {from {transform：scale（0）; }到{transform：scale（1）; }}

 < script src =https：// cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\"> ;</script> ;<div id =research-area> < a class =research-circle rs-1href =＃> 1< / a> < a class =research-circle rs-2href =＃> 2< / a> < a class =research-circle rs-3href =＃> 3< / a> < a class =research-circle rs-4href =＃> 4< / a>< / div>

div>

在上述版本中，每个圆在上一个完成自己的动画后立即开始动画。如果你需要从一个元素的动画完成到下一个动画的开始之间有1s的延迟，那么只需增加 animation-delay ，如下面的代码片段所示。 / p>

animation-delay 的计算逻辑非常简单。对于每个元素，

animation-delay = n-1）*（animation-duration + animation-delay），其中 n / ul>

  .research-circle {display：inline-block; height：50px; width：50px; border-radius：50％; border：2px solid; text-align：center; text-decoration：none; line-height：50px;动画：缩放1s linear 1 backwards;}。rs-1 {animation-delay：0s;} rs-2 {animation-delay：2s;} rs-3 {animation-delay：4s;}。 animation-delay：6s;}。rs-5 {animation-delay：8s;} rs-6 {animation-delay：10s;} rs-7 {animation-delay：12s; rs-12 {animation-delay：18s;}。rs-11 {animation-delay：20s;} rs-12 {animation-delay： 22s;} @ keyframes scale {from {transform：scale（0）; }到{transform：scale（1）; }}

 < script src =https：// cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\"> ;</script> ;<div id =research-area> < a class =research-circle rs-1href =＃> 1< / a> < a class =research-circle rs-2href =＃> 2< / a> < a class =research-circle rs-3href =＃> 3< / a> < a class =research-circle rs-4href =＃> 4< / a> < a class =research-circle rs-5href =＃> 5< / a> < a class =research-circle rs-6href =＃> 6< / a> < a class =research-circle rs-7href =＃> 7< / a> < a class =research-circle rs-8href =＃> 8< / a> < a class =research-circle rs-9href =＃> 9< / a> < a class =research-circle rs-10href =＃> 10< / a> < a class =research-circle rs-11href =＃> 11< / a> < a class =research-circle rs-12href =＃> 12< / a>< / div>

div>

I have a clock face of circles that I want to appear in order after 1 sec, so grow the first one to full size from zero, then after 1 sec, the second, then after 1 sec, the third etc etc. (the circle needs to expand centrally)

This is my circle (there will be 12 in total like this):

<div id="research-area">
    <a class="research-circle rs-<?php echo $counter; ?>" href="<?php echo the_permalink(); ?>" style="background-image:url(<?php echo the_field('icon'); ?>);"></a>
</div>

There's a counter on each circle class outputting 1,2,3 etc up to 12.

How do I sequentially expand each circle using CSS? At the moment each circle just expands from the top left, all at the same time!

#research-area {
  height: 883px;
  width: 980px;
  position: relative;
}
.research-circle {
  height: 156px;
  width: 174px;
  display: block;
  position: absolute;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.research-circle:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.research-circle {
  -webkit-animation: circle 1s;
  -moz-animation: circle 1s;
  -o-animation: circle 1s;
  animation: circle 1s;
}
@keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-webkit-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-moz-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@-o-keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
@keyframes circle {
  0% {
    height: 0px;
    width: 0px;
  }
  100% {
    height: 156px;
    width: 174px;
  }
}
.rs-1 {
  left: 393px;
  top: -2px;
}
.rs-2 {
  left: 578px;
  top: 47px;
}
.rs-3 {
  left: 713px;
  top: 183px;
}
.rs-4 {
  left: 763px;
  top: 367px;
}
.rs-5 {
  left: 713px;
  top: 551px;
}
.rs-6 {
  left: 578px;
  top: 687px;
}
.rs-7 {
  left: 394px;
  top: 736px;
}
.rs-8 {
  top: 687px;
  left: 209px;
}
.rs-9 {
  left: 73px;
  top: 551px;
}
.rs-10 {
  left: 24px;
  top: 367px;
}
.rs-11 {
  left: 74px;
  top: 182px;
}
.rs-12 {
  left: 208px;
  top: 47px;
}

解决方案

Here is a sample using 4 circles. All you have to do is add an animation-delay that is equivalent to the amount of time that will be required for the previous elements to complete the animation. So, first circle should have no animation delay, second should have 1s delay, third should have 2s delay and so on (because the animation-duration for each cycle is 1s).

.research-circle {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  animation: scale 1s linear 1 backwards;
}
.rs-1 {
  animation-delay: 0s;
}
.rs-2 {
  animation-delay: 1s;
}
.rs-3 {
  animation-delay: 2s;
}
.rs-4 {
  animation-delay: 3s;
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
  <a class="research-circle rs-1" href="#">1</a>
  <a class="research-circle rs-2" href="#">2</a>
  <a class="research-circle rs-3" href="#">3</a>
  <a class="research-circle rs-4" href="#">4</a>
</div>

In the above version, each circle starts its animation immediately after the previous one completes its own animation. If you need a delay of 1s between the completion of animation for one element to the start of animation for the next then just increase the animation-delay like in the below snippet.

The logic for calculation of animation-delay is pretty simple. For each element,

animation-delay = (n-1) * (animation-duration + animation-delay), where n is its index.

.research-circle {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  animation: scale 1s linear 1 backwards;
}
.rs-1 {
  animation-delay: 0s;
}
.rs-2 {
  animation-delay: 2s;
}
.rs-3 {
  animation-delay: 4s;
}
.rs-4 {
  animation-delay: 6s;
}
.rs-5 {
  animation-delay: 8s;
}
.rs-6 {
  animation-delay: 10s;
}
.rs-7 {
  animation-delay: 12s;
}
.rs-8 {
  animation-delay: 14s;
}
.rs-9 {
  animation-delay: 16s;
}
.rs-10 {
  animation-delay: 18s;
}
.rs-11 {
  animation-delay: 20s;
}
.rs-12 {
  animation-delay: 22s;
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="research-area">
  <a class="research-circle rs-1" href="#">1</a>
  <a class="research-circle rs-2" href="#">2</a>
  <a class="research-circle rs-3" href="#">3</a>
  <a class="research-circle rs-4" href="#">4</a>
  <a class="research-circle rs-5" href="#">5</a>
  <a class="research-circle rs-6" href="#">6</a>
  <a class="research-circle rs-7" href="#">7</a>
  <a class="research-circle rs-8" href="#">8</a>
  <a class="research-circle rs-9" href="#">9</a>
  <a class="research-circle rs-10" href="#">10</a>
  <a class="research-circle rs-11" href="#">11</a>
  <a class="research-circle rs-12" href="#">12</a>
</div>

这篇关于使用CSS依次展开圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用CSS依次展开圆形 [英] Expand circles sequentially using CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用CSS依次展开圆形 [英] Expand circles sequentially using CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭