play cor images art article rotate blog 程序實現 key

參考網址：https://blog.csdn.net/sinat_19327991/article/details/79083885

頁面部分：

<view class="record flex1"> 　　<!-- 唱片 --> 　　<image src="../images/musicCD.png" class="{{playStatus === true ? ‘rotate-360‘ : ‘rotate-360-paused‘}}"/> 　　<!-- 唱針 --> 　　<view class="handle {{handleStatus === true ? ‘rotate-10 transform‘ : ‘rotate-10-paused transform-paused‘}}" > 　　　　<image src="../images/musicCDline.png" /> 　　</view> </view> css部分： @keyframes rotate { 　　0% {transform: rotate(0deg);transform-origin: 50% 50% 0;} 　　50% {transform: rotate(180deg);transform-origin: 50% 50% 0;} 　　100% {transform: rotate(360deg);transform-origin: 50% 50% 0;} } @keyframes rotate13 { 　　0% {transform: rotate(0deg); transform-origin: 75% 5%;} 　　100% {transform: rotate(13deg); transform-origin: 75% 5%;} } 　 .transform { 　　transform: rotateZ(12deg); 　　-webkit-transform: rotateZ(12deg); 　　transform-origin: 75% 5%; } .transform-paused { 　　transform: rotateZ(0deg); 　　-webkit-transform: rotateZ(0deg); 　　transform-origin: 75% 5%; } .rotate-10 { 　　animation: rotate13 1s linear; } .rotate-10-paused { 　　animation-play-state: paused; } .rotate-360 { 　　animation: rotate 10s linear infinite; } .rotate-360-paused { 　　animation-play-state: paused; }

小程序實現音樂播放界面---黑膠唱片轉動與唱針旋轉