昨天講到了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)：

總結

以上是生活随笔為你收集整理的css高清动图,CSS3+PNG实现GIF动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。