2.网易云音乐播放界面

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .container{
            position: relative;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .handle{
            width: 120px;
            height: 200px;
            position: absolute;
            left: 37%;
            transform: rotate(-30deg);       
            transform-origin: 30px 30px;   /* 旋转中心点 */
        }
        .pan{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 130px;
            left: 125px;
        }
        @keyframes move{
            0%{
                transform:rotate(-30deg)
            }
            100%{
                transform: rotate(0deg)
            }
        }
        @keyframes unmove{
            0%{
                transform: rotate(0deg)
            }
            100%{
                transform: rotate(-30deg)
            }
        }
        /* animation-fill-mode:forwards;
        backwards:动画结束时会回到开始位置
            forwards：动画会在结束位置停止
        */
        .move{
            animation: move 2s forwards;
        }
        .unmove{
            animation: unmove 2s forwards;
        }
    </style>

 <div class="container">
         <!-- {{isPlay}} -->
        <img @click="handleClick" class="pan" src="images/pan.png" alt="">
        <img  :class="[isPlay?'move':'unmove','handle' ]" src="images/shou.png" alt="">
    </div>
    <script>
        new Vue({
            el:".container",
            data:{
                isPlay:false
            },
            methods:{
                handleClick(){
                    this.isPlay=!this.isPlay;
                }
            }
        })
    </script>

课件地址：

https://gitee.com/wangsiman/wuhannotebook/blob/master/javascript/js-day13/04vue-music.html