昨天讲到了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):