wepy小程序（多张卡片）合成动画

描述

• 7张卡片合成一张新卡片
• 7张卡片绕环形旋转
• 更多的特效可以自己增加哦

方法

• 卡片的初始位置相同，所以每张卡片都需要一个单独的动画来控制它的旋转角度
• transform-origin控制卡片的旋转路径

代码

• html

• css

.cards {
  position: relative;
  height: 660rpx;
  width: 660rpx;
  border-radius: 50%;
  margin-top: 20rpx;
}

.cards .compose-card {
  width: 660rpx;
  margin-top: 272rpx;
}

.cards .compose-card .common {
  height: 142rpx;
  transform-origin: 50% 50%;
}

.cards .compose-card .common .img-card {
  width: 108rpx;
  height: 142rpx;
  transition: all 1s;
}

.card1 {
  transform: rotate(90deg);
}

.card1 .img-card {
  transform: rotate(-90deg);
}

.card2 {
  margin-top: -142rpx;
  transform: rotate(140deg);
}

.card2 .img-card {
  transform: rotate(-140deg);
}

.card3 {
  margin-top: -142rpx;
  transform: rotate(195deg);
}

.card3 .img-card {
  transform: rotate(-195deg);
}

.card4 {
  margin-top: -142rpx;
  transform: rotate(245deg);
}

.card4 .img-card {
  transform: rotate(-245deg);
}

.card5 {
  margin-top: -142rpx;
  transform: rotate(295deg);
}

.card5 .img-card {
  transform: rotate(-295deg);
}

.card6 {
  margin-top: -142rpx;
  transform: rotate(-15deg);
}

.card6 .img-card {
  transform: rotate(15deg);
}

.card7 {
  margin-top: -142rpx;
  transform: rotate(40deg);
}

.card7 .img-card {
  transform: rotate(-40deg);
}

/*旋转*/
@keyframes spin-1 {
  from {
    transform: rotate(90deg);
  }

  to {
    transform: rotate(4050deg);
  }
}

@keyframes spin-2 {
  from {
    transform: rotate(140deg);
  }

  to {
    transform: rotate(4100deg);
  }
}

@keyframes spin-3 {
  from {
    transform: rotate(195deg);
  }

  to {
    transform: rotate(4145deg);
  }
}

@keyframes spin-4 {
  from {
    transform: rotate(245deg);
  }

  to {
    transform: rotate(4195deg);
  }
}

@keyframes spin-5 {
  from {
    transform: rotate(295deg);
  }

  to {
    transform: rotate(4245deg);
  }
}

@keyframes spin-6 {
  from {
    transform: rotate(-15deg);
  }

  to {
    transform: rotate(3945deg);
  }
}

@keyframes spin-7 {
  from {
    transform: rotate(40deg);
  }

  to {
    transform: rotate(4000deg);
  }
}

注意

• 卡片旋转后img也会旋转，所以每一个卡片区要单独把img旋转成正常的
• 卡片的高度和transform-origin 区域里的高度要一致