角粒子

Question

替换 100 个粒子 div

如下，但如果我添加一个计数器，粒子有 100 个 div 但愚蠢的错误停止了图像的发射，则只会创建最后一个 div。

<div *ngIf="enable">
 <div class='wrap'>
    <div *ngFor="let item of items; index as i">
      <div class='c'><img class="d" src="{{item}}"> {{i}}</div>
  </div>
  </div>
</div>

Answer 1

    for (let i = 0; i < 10; i++) {
      let x = Math.floor(Math.random() * 6) + 1
      switch (x) {
        case 1: { this.spinimage.push("../../assets/anim/pizza.jpg"); break; }
        case 2: { this.spinimage.push("../../assets/anim/pizza2.jpg"); break; }
        case 3: { this.spinimage.push("../../assets/anim/roast.jpg"); break; }
        case 4: { this.spinimage.push("../../assets/anim/starter.jpg"); break; }
        case 5: { this.spinimage.push("../../assets/anim/barb2.jpg"); break; }
        case 6: { this.spinimage.push("../../assets/anim/barb.jpg"); break; }
      }
    }

/* Number of elements (one less than in Haml) */
$n: 20;
$t: 12;   /* Animation duration in seconds */
$r: 10;   /* Radius of a circle in percent */
$moveDistance: 700%; /* The percent of the radius that each dot moves in an animation */
$fullPercent: 50%; /* The keyframe at which the dots reach full size */
$scale: 0.55; /* Max of total size scaled to in animation */
$a: floor($n / 2); /* Divides dots into circles */

// body { background-color: black; }
.container1 {
//background-color: black; 
position: relative;
max-width: 100vh;
max-height: 100%;
margin: 0 auto;
overflow: hidden;
&:before {
  content: "";
  display: block;
  margin-top: 100%;
}
}
.d{  //inner image contained 
  object-fit:fill;  
  height: 10vh; 
  width: 10vh;
}
.dot {
width: $r * 2%;
height: $r * 2%;
position: absolute;
left: 50% - $r;
top: 50% - $r;  
.inner {
  width: 100%;
  height: 100%;
  //background-image: url("../assets/roast.jpg");
  animation: move #{$t}s linear infinite;
  &::after {
    content: '';
    display:initial;
    width: 100%;
    height: 100%;
    border-radius: 2%;
    animation: scale #{$t}s linear infinite;
  }
}
}

@for $i from 1 to $n {
.dot:nth-of-type(#{$i}) {
  transform: rotate(-360deg * $i/$a);
  .inner {
    animation-delay: -#{$t * $i/$n}s;
    &::after {
      animation-delay: -#{$t * $i/$n}s;
    }
  }
}
}

@keyframes move {
to { transform: translateX($moveDistance); }
}

@keyframes scale {
/* Scale */
0%, 100% { transform: scale(0); }
#{$fullPercent} { transform: scale($scale); }

/* Colors */
/* Offset to not stop transforms */
@for $i from 0 through 10 {
  @if $i < 10 {
    $scaler: $i * 10;
    #{$scaler + 0.001%} {
      background: hsl(360 * $scaler / 100, 80%, 55%); 
    }
  }
  @else {
    99.999% {
      background: hsl(360, 80%, 55%); 
    }
  }
}
}

<ng-container *ngFor="let image of spinimage; let i = index">
  <div class='dot'>
    <div class='inner'><img class="d" src="{{image}}"></div>
  </div>
</ng-container>