描述
- 7张卡片合成一张新卡片
- 7张卡片绕环形旋转
- 更多的特效可以自己增加哦
方法
- 卡片的初始位置相同,所以每张卡片都需要一个单独的动画来控制它的旋转角度
- transform-origin控制卡片的旋转路径
代码
<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>
.cards {
position: relative;
height: 660rpx;
width: 660rpx;
border-radius: 50%;
margin-top: 20rpx;
}
.cards .compose-card {
width: 660rpx;
margin-top: 272rpx;
}
.cards .compose-card .