标签：css3 动画 forwards dome animation 逐帧 background position

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

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

 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。