css3旋转动画循环效果(无限循环旋转动画)

要写一个无限循环旋转动画酷炫效果，就要用到css3的动画属性animation，轻松写出一个css3旋转动画循环效果。在animation里定义了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会停止，用到了animation-play-state属性。

一、css3旋转动画循环效果，看图所示：

说明：在animation里定义了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会停止，用到了animation-play-state属性。

二、animation-play-state属性：

规定动画正在运行还是暂停。

1、语法：animation-play-state: paused|running;

2、属性值：

    1）paused：规定动画已暂停。

    2）running：规定动画正在播放。

三、css3旋转动画循环效果实例完整代码如下：

  
  
  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    /*定义绕x轴的3d正向旋转动画 */
    @keyframes rote360 {
      from{}
      to{
     transform: rotateX(360deg);
     }
    }
    .nav {
      position: relative;
     width: 180px;
     height: 50px;
     margin: 50px auto;
       /*透视距离 */
     perspective: 700px;
      /* 开启子元素的动画显示，否则会和父元素一样 */
     transform-style: preserve-3d;
      /* 使用动画，每2秒旋转一圈，匀速，无限循环 */
     animation: rote360 2s linear infinite;
    }
    /*鼠标在nav盒子上时动画停止*/
    .nav:hover {
      animation-play-state:paused;
      -webkit-animation-play-state:paused;
      cursor: pointer;
    }
    /*定义上下，前后四个面 */
    .nav .face,
    .nav .botton,
    .nav .back,
    .nav .top {
       /*1.绝对定位，先使四面重叠放在一块 */
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     color: white;
     font-size: 22px;
     line-height: 50px;
     text-align: center;
     background-color: #008000;
    }
    /*2.前面的面向前z轴移动25px */
    .nav .face{
     transform: translateZ(25px);
    }
    /*3.下面先向下移动25px，再x轴负向旋转-90度 */
    .nav .botton {
     background-color: red;
     transform:translateY(25px) rotateX(-90deg);
    }
    /*4.上面先上移动-25px，再x轴正向旋转90度 */
    .nav .top {
     background-color: purple;
     transform:translateY(-25px) rotateX(90deg);
    }
    /*5.后面先后移动-25px，再x轴正向旋转180度 */
    .nav .back{
     background-color: orange;
     transform: translateZ(-25px) rotateX(180deg);
    }
  


  

    
小小丑
    
叫你一起学前端
    
小小丑
    
叫你一起学前端