zoukankan      html  css  js  c++  java
  • 小程序实现音乐播放界面---黑胶唱片转动与唱针旋转

    参考网址: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;

  • 相关阅读:
    android 拖放功能
    android 桌面文件夹ui美化
    instanceof 杂谈
    Android自定义长按事件
    launcher in android
    类似网易163TAB选项卡(标签)代码
    【新手入门教程】简洁纯CSS下拉导航菜单代码
    橘黄色的大气CSS菜单代码
    Flash效果的网站后台左侧Js多级展开菜单代码
    仿FLASH动感十足鼠标滑过放大的菜单代码
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/9828778.html
Copyright © 2011-2022 走看看