參考網址：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;
}
知識要點：
css3 transform：旋轉
css3 transform-origin：旋轉中心
css3 animation：
animation-name：綁定keyframe名稱
animation-duration：動畫所花時長（默認0s）
animation-timing-function；動畫速度曲線（默認ease）
animation-iteration-count：動畫播放次數 默認1 infinite（無限次）
animation: rotate 10s linear infinite;