css CSS3动画火焰*

Posted 2021-05-13

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

<div id="logfire">
    <div id="flamegroup">
           <div class="flame" id="fl1"></div>
           <div class="flame" id="fl2"></div>
           <div class="flame" id="fl3"></div> 
    </div>
</div>

/**
 * CSS3 Animated Flames *
 Improved version using the 'steps' attribute to control the sprite switching
 */

body {background-color:#000}


    
#flamegroup {
    margin:0 auto;
    position:relative;
    top:100px;
    width:120px; 
    height:156px;
}
.flame {
    margin:0 auto;
    position:absolute;
    width:100px; 
    height:136px;
    background:url(http://sitepointstatic.com/examples/css3/animation/flame-sprite.png?r=6) 0px 0px no-repeat;
}

#fl1 {
   animation: flicker 1.3s steps(1) infinite;
    top:20px;
    left:10px
}
#fl2 {
   animation: flicker .7s steps(1) infinite;
    top:10px;
    left:20px;
    
}
#fl3 {
   animation: flicker 1.1s steps(1) infinite;
}

@keyframes flicker { /* flame pulses */
    0%, 
    100%{background-position:0px 0px; opacity:.8 }
    25% {background-position:-100px 0px;}
    50% {background-position:-200px 0px;; opacity:.4;}
    75% {background-position:-100px 0px;}
}