css高清动图,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)：