电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: css3 背景图动画（2） [打印本页]

作者: look_w 时间: 2019-4-12 15:55 标题: css3 背景图动画（2）

示例2：鼠标划过动画效果

代码：

<!DOCTYPE html>
<html>
<head>
      <title></title>
      <style type="text/css">
      @keyframes mlfly {
            0%{
               background-position:0 0;
            }
            100%{
               background-position:0px -4425px;
            }
      }
      .kk1:hover{
         animation:mlfly .2s steps(59,start) .0s forwards;
      }

      .kk1{
         position:absolute;
         height: 75px;
         width: 75px;
         background: url('https://img.alicdn.com/tps/TB1sd_fLXXXXXX2XFXXXXXXXXXX-150-9000.jpg') center 0 no-repeat;
         -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
         background-size: 75px auto;
         -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
      }
      </style>
      </style>
</head>
<body>
<div class="kk1"></div>
</body>
</html>

原图：

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)