css - 围绕圆圈复制动画

Question

我有一个“烟花”动画，它会围绕一个圆形图像爆炸，10 条均匀分布的射线像轮辐一样射出。每个“辐条”都展开到它的全长，“尾部”追上“头”，最后消失。我有第一个从底部出来:

HTML:

<div id="firework"></div>

CSS:

#firework {
  background-color: red;
  border-radius: 30%;
  height: 0px;
  margin: 0px 0px;
  width: 2px;
  -webkit-animation: firework-0 1s 1;
}


@-webkit-keyframes firework-0 {
  0% {
    height: 0px;
    margin-top: 0px;
  }
  50% {
    height: 64px;
    margin-top: 0px;
  }
  100% {
    height: 0px;
    margin-top: 64px;
  }
}

fiddle :http://jsfiddle.net/xcWge/1407/

每 36 度复制一次的最佳方法是什么？我尝试创建从顶部出来的那个，但我认为我不能继续使用此边距属性来获得相同的头/尾效果。我读过关于围绕一个圆圈放置东西(Position icons into circle)但我也需要保持相同的径向动画效果，这让我很困惑。

Answer 1

使用 CSS:

使用带有纯 CSS 的单个元素来完成您正在寻找的事情将非常困难(如果不是不可能的话)。我们可以通过使用尽可能多的元素来做到这一点。需要的辐条数。将辐条绝对定位在特定位置并旋转所需的 Angular 。原点应固定在元素的底部，以便它们都汇聚到一个点。

动画本身可以通过使用 linear-gradient 和动画他们的位置来实现。

.firework {
  position: absolute;
  top: 100px;
  left: 100px;
  border-radius: 30%;
  height: 64px;
  width: 2px;
  background: linear-gradient(to top, red, red);
  background-repeat: no-repeat;
  background-size: 100% 64px;
  background-position: 0px -64px;
  transform-origin: bottom;
  animation: firework-0 1s 1;
}
.firework:nth-child(2){
  transform: rotate(36deg)
}
.firework:nth-child(3){
  transform: rotate(72deg)
}
.firework:nth-child(4){
  transform: rotate(108deg)
}
.firework:nth-child(5){
  transform: rotate(144deg)
}
.firework:nth-child(6){
  transform: rotate(180deg)
}
.firework:nth-child(7){
  transform: rotate(216deg)
}
.firework:nth-child(8){
  transform: rotate(252deg)
}
.firework:nth-child(9){
  transform: rotate(288deg)
}
.firework:nth-child(10){
  transform: rotate(324deg)
}

@keyframes firework-0 {
  0% {
    background-position: 0px 64px;
  }
  50% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -64px;
  }
}

<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>

注意:没有。如果使用伪元素，可以大大减少元素的数量，但我会留给你。

不在中心相交的线:

如果您需要它们不聚集在一个点上并且看起来像它们分开而是围绕一个圆圈放置，那么动画会变得有点复杂。它需要一个渐变，它的一半大小是透明的，而另一半是彩色的。通过动画背景的大小和位置，可以实现所需的效果。

背景位置中的 calc 很关键，因为它使渐变相对于元素的底部定位，从而使动画按预期工作。

.firework {
  position: absolute;
  top: 100px;
  left: 100px;
  border-radius: 30%;
  height: 64px;
  width: 2px;
  background: linear-gradient(to top, transparent 32px, red 32px);
  background-repeat: no-repeat;
  background-size: 100% 64px;
  background-position: 100% calc(100% - 32px);
  transform-origin: bottom;
  animation: firework-0 1s 1;
}
.firework:nth-child(2) {
  transform: rotate(36deg)
}
.firework:nth-child(3) {
  transform: rotate(72deg)
}
.firework:nth-child(4) {
  transform: rotate(108deg)
}
.firework:nth-child(5) {
  transform: rotate(144deg)
}
.firework:nth-child(6) {
  transform: rotate(180deg)
}
.firework:nth-child(7) {
  transform: rotate(216deg)
}
.firework:nth-child(8) {
  transform: rotate(252deg)
}
.firework:nth-child(9) {
  transform: rotate(288deg)
}
.firework:nth-child(10) {
  transform: rotate(324deg)
}
@keyframes firework-0 {
  0% {
    background-size: 100% 32px;
    background-position: 100% calc(100% - 0px);
  }
  50% {
    background-size: 100% 64px;
    background-position: 100% calc(100% - 0px);
  }
  100% {
    background-size: 100% 32px;
    background-position: 100% calc(100% - 32px);
  }
}

<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>

---

使用 SVG:

对于这样的效果，我的建议是使用 SVG，因为 SVG 是创建它们的正确工具。它的创建和维护也相当简单。

我们只需要 10 line从一个点到另一个点画一条线的元素，给它一个虚线填充，然后动画 stroke-dashoffset以获得所需的效果。

线在中心相交:

对于这种效果，必须创建线条，使第一个坐标 (x,y) 成为假想圆 (32,32) 的中心。对于第二个坐标，我们应该根据直线的 Angular 在假想的圆上找到点。公式描述here .

注意:在 SVG 中，0 度对应于 3 点钟位置。

svg{
  width: 128px;
  height: 128px;
}
line{
  stroke: red;
  animation: firework 1s 1;
  stroke-dasharray: 32 32; /* radius radius */
  stroke-dashoffset: -32; /* -radius */
}
@keyframes firework{
  from{
    stroke-dashoffset: 32; /* radius */
  }
  to{
    stroke-dashoffset: -32; /* -radius */
  }
}

<svg viewBox='0 0 64 64'>
  <g>
    <line x1='32' y1='32' x2='32' y2='0' />
    <line x1='32' y1='32' x2='50.80' y2='6.11' />
    <line x1='32' y1='32' x2='62.43' y2='22.11' />
    <line x1='32' y1='32' x2='62.43' y2='41.88' />
    <line x1='32' y1='32' x2='50.80' y2='57.88' />
    <line x1='32' y1='32' x2='32' y2='64' />
    <line x1='32' y1='32' x2='13.19' y2='57.88' />
    <line x1='32' y1='32' x2='1.56' y2='41.88' />
    <line x1='32' y1='32' x2='1.56' y2='22.11' />
    <line x1='32' y1='32' x2='13.19' y2='6.11' />
  </g>
</svg>

不在中心相交的线:(但它们的投影会)

为了达到这个效果，我们应该为两个坐标沿两个圆寻找点。第一个坐标将位于半径小于第一个(本演示中为 16)的内圆上。第二个将在较大的圆上(本演示中的半径 = 32)。

svg{
  width: 128px;
  height: 128px;
}
line{
  stroke: red;
  animation: firework 1s 1;
  stroke-dasharray: 16 16; /* length of the line length of the line */
  stroke-dashoffset: -16; /* -length */
}
@keyframes firework{
  from{
    stroke-dashoffset: 16; /* length */
  }
  to{
    stroke-dashoffset: -16; /* length */
  }
}

<svg viewBox='0 0 64 64'>
  <g>
    <line x1='32' y1='16' x2='32' y2='0' />
    <line x1='41.40' y1='19.05' x2='50.80' y2='6.11' />
    <line x1='47.21' y1='27.05' x2='62.43' y2='22.11' />
    <line x1='47.21' y1='36.94' x2='62.43' y2='41.88' />
    <line x1='41.40' y1='44.94' x2='50.80' y2='57.88' />
    <line x1='32' y1='48' x2='32' y2='64' />
    <line x1='22.59' y1='44.94' x2='13.19' y2='57.88' />
    <line x1='16.78' y1='36.94' x2='1.56' y2='41.88' />
    <line x1='16.78' y1='27.05' x2='1.56' y2='22.11' />
    <line x1='22.59' y1='19.05' x2='13.19' y2='6.11' />
  </g>
</svg>