css3 animation逐帧动画的实现

1.在页面中写一个div来存放图片，.dome是来写动画的

1 <div class="iconBox">
2         <div class="picture dome"></div>
3          <p class="title">软件著作权</p>
4 </div>

View Code

 

 2.动画效果样式

　　.iconBox {
        .picture {
          margin: auto;
          width: 88px;
          height: 70px;
          background-image: url("../../static/images/businessArea/fl/fl-icon10.png");
        }
        .dome {
          animation: goBack 0.3s steps(7) forwards;
        }
        @keyframes goBack {
          from {
            background-position: 0 -510px;
          }
          to {
            background-position: 0 0;
          }
        }
    }
    .iconBox:hover .dome {
        .dome {
          animation: mover1 0.3s steps(7) forwards;
        }
        @keyframes mover1 {
          from {
            background-position-y: 0;
          }
          to {
            background-position-y: -510px;
          }
        }
     }

3.鼠标悬浮后的效果

 

 

 

 

标签：css3,动画,forwards,dome,animation,逐帧,background,position
来源： https://www.cnblogs.com/qqm123/p/16106164.html