CSS3 Effect Example: 11 CSS3 Code Special Effects instance

Web page Production WEBJX article introduction: recently spent a lot of time to clean up the CSS3 special effects, using a more intuitive and understandable way to share with you, I hope you will have a little harvest.

Recently spent a lot of time to clean up the CSS3 special effects, using a more intuitive and understandable way to share with you, I hope you will have a little harvest.

"-moz-" generally refers to the writing of Firefox, "-webkit-" generally refers to the WebKit kernel browser.
1, Border-radius achieve fillet effect, just a line of CSS code can be implemented, support many browsers, of course, does not support ie.

2, Border-top-left-radius set the radius of each corner of the fillet (ie does not support)

3, Box-shadow to achieve shadow effect (ie does not support)

4, CSS3 to achieve a perfect combination of shadow and rounded corners, personal feeling this effect is very good, very three-dimensional.

5, when others do not have this font on the machine, and you want to make the page set to this font, not to consider the font upload to the server, only need to set a relative path and font name on the line. Easy, huh?

6, Text-shadow to achieve multiple shadow effect, to create bright colors.

7, opacity to achieve background transparency (ie does not support)

8, Transform:translate (x axis, Y axis) to achieve the object movement:

9, Transform:scale (multiple) to achieve zoom in and out.

10, Transform:skew () the element to produce perspective effect

11, Transform:rotate (degree) to rotate the element x degree