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

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

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

示例1：实现背景图循环播放效果：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
   @keyframes mlfly {
            0%{
                  background-position:0 0;
            }
            100%{
                  background-position:210px 0;
            }
         }
         .ele-man{
            width:70px;
            position:absolute;
            top: 30px;
            left:50%;
            margin-left:-35px;
            background-image: url("m1-man.32@2x.png");
            background-size:210px 163px;
            //background-size:auto 163px;
            height:163px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            animation:mlfly .2s steps(3,start) .5s infinite alternate;//这里的3是210/70得来的。
         }
</style>
</style>
</head>
<body>
<div class="ele-man"></div>
</body>
</html>

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