Question

我正在尝试为要旋转的9个图标的列表创建一个车轮动画，并且应该基于布尔条件状态显示该动画，所以我尝试这样

html

<div class="buttons " >
    <div *ngIf="A" >A</div>
    <div *ngIf="B" >B</div>
    <div *ngIf="C" >C</div>
    <div *ngIf="D" >D</div>
</div>

css

//按钮旋转

.buttons {
    position: absolute;
    width: 40%;
    height: 40%;
    z-index: 1;
    left: 40%;

}

.buttons div {
    position: absolute;
    animation: bucket_rotate 60s infinite linear ;
    top: 80%;
    margin-top: 60%;
    margin-left: -13px;
    color: white;
}


@keyframes buttons_rotate {
    0% { 
    transform: rotate(0) translateX(75px) rotate(0); 
    }
    100% { 
    transform: rotate(360deg) translateX(75px) rotate(-360deg); 
    }
}

/ *仅可见一项* /

 .buckets div:nth-last-child(1) {
    color: red;
    animation-delay: 55s;
  }

/ *仅显示两个项目* /

  .buckets div:nth-child(2),
      .buckets div:nth-child(2) ~ .buckets {
        color: blue;
        animation-delay: 30s;
      }

/ *仅显示三个项目* /

  .buckets div:nth-child(3),
      .buckets div:nth-child(3) ~ .buckets {
        color: green;
        animation-delay: 30s;
      }

我需要的是当我的.ts文件返回一个真值时，将显示该项目，如果一项表示该项目应旋转360度如果2表示每个项目应相对放置并旋转完整的圆圈如果3意味着应该像三角形一样旋转有人可以帮我吗

为按钮创建滚轮动画

0 个答案: