码迷,mamicode.com
首页 > Web开发 > 详细

css3 背景图动画一

时间:2016-05-03 17:47:56      阅读:790      评论:0      收藏:0      [点我收藏+]

标签:

一 实现背景图循环播放

@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>

技术分享

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


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

 

css3 背景图动画一

标签:

原文地址:http://www.cnblogs.com/junwu/p/5455730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!