css3 背景图动画一

本文转载自查看原文 2016-05-03 17:13 2591

一实现背景图循环播放

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


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



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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 纯CSS3怎么给文本添加背景图 css3裁剪背景图 CSS3制作文字背景图 CSS3 动画一瞥 css3动画 --- 网站背景图片渐变且切换代码：　CSS3动画，简单示例（鼠标移上去后，背景图片旋转） background 背景图片 --css3 css3 背景图片 css3背景图水平垂直顺时针逆时针翻转旋转利用css3的多背景图属性实现幻灯片切换效果