css3 背景图动画一

一实现背景图循环播放

@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;
                height:163px;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                animation:mlfly .2s steps(3,start) .5s infinite alternate;
            }
    </style>
</head>
<body>
    <div class="ele-man"></div>
</body>


实现火箭火苗动的效果 实际背景图有三个



通过循环播放三个背景图达到动画效果

posted on 2016-05-03 17:13 小武爷阅读(3991) 评论(0) 编辑收藏举报