关键帧旋转轮播图

关键帧动画

animation: name duration timing-function delay iteration-count direction fill-mode;	
- 

• 参数一: 指定动画名称 必选
• 参数二: 动画时长 必选
• 参数三: 动画的运动轨迹 (先快后慢 匀速 先慢后快) 默认是匀速
• 参数五: 动画的播放次数 默认是1次
• 参数四: 动画延迟时间 默认没有延迟
• 参数六: 动画的播放方向 默认是顺时针
• 参数七: 动画结束后的状态 默认会恢复原来的状态

1. 旋转动画

// 旋转:
 <style>
        .box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-image: url("./imgs/fengche.png");
            background-size: 100% 100%;
            /* 动画名称 spin 动画时长 3s  匀速  无限次播放  */
            animation: spin 1s linear infinite;
        }  
        /* spin 快速的旋转 */
        @keyframes  spin {
            0%{
                /* rotate 旋转   deg 角度单位 */
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>

2. 轮播动画

轮播:

   <style>
      .box {
        border: 1px solid #000;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
      }
      img{
          width: 500px;
          height: 300px;
          float: left;
      }
      .clearfix::after{
          content: "";
          display: block;
          clear: both;
      }
        /* 思路让banner向左移动 */
      .banner {
          /*  块元素宽度默认是 和父元素等宽 可以设置宽高 */
          width:3000px;
          left:0px;
         /* 使用 相对定位和 子绝父相都行 */
          position: absolute;
          animation:  lunbo 10s linear infinite;
      }

  
      /* 自己定义一个轮播动画  */
      @keyframes  lunbo {
          0%{
              left:0px;
          }
          20%{
              left: -500px;
          }
          40%{
              left: -1000px;
          }
          60%{
              left:-1500px;
          }
          80%{
              left: -2000px;
          }  
          100%{
              left: -2500px; /*假的第一张*/
          }  
      }
      /* 当鼠标悬浮时 让动画暂停 */
      .banner:hover{
          /* 动画暂停 */
          animation-play-state: paused;
      }
    </style>