CSS3+PNG实现GIF动画效果

昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果。代码很简单主要用到了css3的animation属性,代码如下:

@-webkit-keyframes loading{  
0%{
        -webkit-transform: rotate(0deg);  
    }
50%{
        -webkit-transform: rotate(180deg);  
    }
100%{
        -webkit-transform: rotate(360deg);  
    }
}
@-moz-keyframes loading{  
0%{  
        -moz-transform: rotate(0deg);  
    }
50%{  
        -moz-transform: rotate(180deg);  
    }
100%{
        -moz-transform: rotate(360deg);  
    }
}
#loading{  
    -webkit-transform-origin: center center;  
    -webkit-animation-name: loading;  
    -webkit-animation-duration: 1.2s;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-iteration-count: infinite;
    -moz-transform-origin: center center;  
    -moz-animation-name: loading;  
    -moz-animation-duration: 1.2s;  
    -moz-animation-timing-function: linear;  
    -moz-animation-iteration-count: infinite;  
}

用到的图片

效果(chrome、firefox6):

“CSS3+PNG实现GIF动画效果”的5个回复

  1. 祝你把金财银财大财小财,汇成万贯家财;用你的朝气英气正气勇气,换得一团和气;把我最真的祝福祝愿心愿许愿,一并送给你:祝春节快乐,富贵连年。辛卯年(兔)腊月廿六 2012-1-19

发表评论

电子邮件地址不会被公开。 必填项已用*标注