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的多背景圖屬性實現幻燈片切換效果