CSS implementation effects in loading

That day, learning a bit of style effect, self-realization of a simple loading in the effect of nonsense, start it!!

One, the realization of a ring

To implement the ring, first we need to know the essence of the box model inside the border, first look at an effect bar

From above, we should be able to see the essence of the element box model border : The elements in each direction border are trapezoidal rather than rectangular. Knowing this, it's not a problem to realize an arc style.

We just have to find a way to turn the middle red area into an arc, and we'll set the DIV's Border-radius to 50%.

is not a circle appears, now we let the middle of the area is white will appear arc, in fact, the default background color is white, we can not set the background color, this way to illustrate the principle, we still set ourselves

Normally the rings in the load are not the whole, here we draw a semi-closed ring

Do you understand me? Just set the color of the border-top to white, so that we can solve the first problem, down is to let the ring move up.

Two, the turning ring

This is going to use the CSS inside the animation, we define an animation, because here is just a demonstration, so the simple implementation of the following animation, and there is no compatible with the major browsers, you can write the whole according to the situation.

1 @keyframes loading{2   0%{3     transform:rotate (0deg); 4      }5    100%{6     transform:rotate (360deg); 7      }8  }

View Code

We will add the animation effect to the style, the effect is achieved, the demo is as follows

Http://files.cnblogs.com/files/nini-huai/demo.gif

CSS implementation effects in loading