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

描述

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

方法

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

代码

• html

 <repeat for="{
  {cardsList}}" index="index" key="index" item="item">
      <view class="card{
  {index}} common" style="animation: {
  {rotateEnable?'spin-'+index:''}}  4.2s ease-in .8s 1;">
         <image class="img-card“  src="a.png" mode="widthFix"></image>
      </view>
  </repeat>

• 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 .