2021-06-03

css3实现图片动画（旋转，呼吸）

旋转：

.hotBall {
      margin: auto;
      width: 308px;
      height: 308px;
      background: url("../../assets/images/home/hotBall.png") no-repeat;
      animation: rotate 6s linear infinite;//主要代码
      background-size: 100% 100%;
    }
@keyframes rotate {
  0% {
    // transform: rotateZ(0deg); /*从0度开始*/
    transform: rotateX(0deg); /*从0度开始* --X轴为中心旋转/
    // transform: rotateY(0deg); /*从0度开始* --Y轴为中心旋转/
  }
  100% {
    // transform: rotateZ(+360deg); /*360度结束*/
    transform: rotateX(+360deg); /*360度结束*/
    // transform: rotateY(180deg);/*360度结束*/
  }
}

呼吸：

.breathe-div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  margin: 150px auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;//主要代码
  -webkit-animation-duration: 3000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
 @-webkit-keyframes breathe {
   0% {
     opacity: 0.8;//最小透明度。设置为0为完全透明
   }

   100% {
     opacity: 1;//最大
   }
 }