微信小程序开发之——婚礼邀请函-邀请函页面(4

李四

新娘

我们诚邀您来参加我们的婚礼

事件：2020年12月30日

地点：北京市海淀区XX路XX酒店

3.2 样式文件(pages/index/index.wxss)

/*播放器 */

.player{

position: fixed; top: 20rpx;right: 20rpx;

z-index: 1;

}

.player>image:first-child{

width: 80rpx;height: 80rpx;

animation: musicRotate 3s linear infinite;

}

.player>image:last-child{

width: 28rpx; height: 80rpx; margin-left: -5px;

}

@keyframes musicRotate{

from{transform:rotate(0deg);}

to{transform: rotate(360deg);}

}

/* 播放暂停 */

.player-play>image:first-child{

animation-play-state: running;

}

.player-play>image:last-child{

animation: musicStart 0.2s linear forwards;

}

.player-pause>image:first-child{

animation-play-state: paused;

}

.player-pause>image:last-child{

animation: musicStop 0.2s linear forwards;

}

@keyframes musicStart{

from{transform: rotate(0deg);}

to {transform: rotate(20deg);}

}

@keyframes musicStop{

from{transform: rotate(20deg);}