image.png

一、网易云

  1.  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  2.     <style>
  3.         * {
  4.             margin: 0;
  5.             padding: 0
  6.         }
  8.         .handle {
  9.             position: absolute;
  10.             left:37%;
  11.             transform-origin: 60px 60px;
  12.             transform: rotate(-30deg);
  13.         }
  14.         .container{
  15.             position: relative;
  16.             width:600px;
  17.         }
  18.         .pan{
  19.             position: absolute;
  20.             top:200px;
  22.         }
  23.         .move{
  24.             animation: move 2s forwards;
  25.         }
  26.         @keyframes move{
  27.             0%{
  28.                 transform:rotate(-30deg)
  29.             }
  30.             100%{
  31.                 transform:rotate(0deg)
  32.             }
  33.         }
  34.         @keyframes unmove{
  35.             0%{
  36.                 transform:rotate(0deg) 
  37.             }
  38.             100%{
  39.                 transform:rotate(-30deg)
  40.             }
  41.         }
  42.         .unmove{
  43.             animation: unmove 2s forwards;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div class="container">
  50.         <img @click="handleClick" class="pan" src="images/pan.png" alt="">
  51.         <img :class="[isPlay?'move':'unmove','handle']" src="images/shou.png" alt="">
  52.     </div>
  53.     <script>
  54.         new Vue({
  55.             el:".container",
  56.             data:{
  57.                 isPlay:false
  58.             },
  59.             methods:{
  60.                 handleClick(){
  61.                     this.isPlay = !this.isPlay;
  62.                 }
  63.             }
  64.         })
  65.     </script>