css3高级特性(1)：transform和animation 音乐光碟动画效果

css3 高级特性系列，就是用css3实现一些项目中经常用到的demo，真实场景真实好用
对于技术最好的检验方式就是实现一个个功能

音乐光碟动画效果

Demo：听音乐时，歌曲播放时光碟就开始转动，对于一个技术爱好者总喜欢想想这是用什么技术怎么来实现，今天我们就通过CSS样式实现这个样一个播放效果

---

实现的效果

代码实现

那么接下来就带大家一起看看如何用css如何实现

html代码

<div class="song_detail ">
    <image class="needle neddle_rotate" src="./images/needle.png"></image>
    <div class="disc_container disc_rotate">
        <image class="disc" src="./images/disc.png"></image>
        <image class="musicImage" src="./images/song.jpg"></image>
    </div>
</div>

css样式文件

.song_detail {
    height: 500px;
    width: 400px;
    background: #d3d3d3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
​
.needle {
    position: relative;
    z-index: 110;
    transform-origin: 20px 0;
    transform: rotate(-20deg);
    transition: transform 1s;
}
​
.disc_container {
    position: relative;
    top: -90px;
    height: 300px;
    width: 300px;
}
​
.disc_container .disc {
    height: 300px;
    width: 300px;
    position: relative;
    z-index: 100;
}
.disc_container .musicImage {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 90;
}
​
​

光碟指针的动画CSS

• transform-origin: 20px 0; 光碟指针旋转默认是按照class=“needle”的image盒子的中心点旋转，需要修改中心点设置在左上角

• transform: rotate(0) 在开始没有播放时，设置了旋转角度是-20deg，播放时设置回到0deg

• transition: transform 1s; 设置旋转速度是1s

  .neddle_rotate {
      transform-origin: 20px 0;
      transform: rotate(0);
  }
  

光碟的动画CSS

• animation: discRotate 6s linear 1s infinite 设置一个名称为discRotate的动画 以相同的速度播放一圈需要6s ，动画播放无限次

  .disc_rotate {
      animation: discRotate 6s linear 1s infinite;
  }
  ​
  @keyframes discRotate {
      from {
          transform: rotate(0deg);
      }
  ​
      to {
          transform: rotate(360deg);
      }
  }
  

知识储备小站

transform

transform 可以对元素进行移动、缩放、拉长或拉伸
demo中使用的是rotate 2D旋转方式

旋转方式	值范围
rotate(deg)	0~360 deg

transform-origin

旋转元素的中心点位置

transform-origin: x-axis y-axis z-axis; 默认是50% 50% 0

transition

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

animation

@keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明	值
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线，默认是 "ease"。	linear、ease(默认)、ease-in、ease-out、ease-in-out
animation-delay	设置动画在启动前的延迟间隔。默认是 0。
animation-iteration-count	定义动画的播放次数。默认是 1。	n、infinite
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

animation-timing-function

描述	测试
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start	end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

参考

菜鸟教程

结语

如果对本文有任何疑问，欢迎提问哦
如果本文对你有一丁点帮助，点个赞支持一下吧，感谢感谢

本文将同步到个人公众号：言字（欢迎关注👏）