How to make icon effect with CSS3

Speaking of the current company projects, I believe that many companies are mess, not only because JS no framework, CSS is not a framework, which led to the project if the need is to upgrade or need to maintain the time of special difficulties.

Recently the leader decided to spend a lot of time to tidy up CSS style, in his sentence is for the benefit of the later.

First we have to have a code of our own team before we can sort out the style.

Thinking really important, so-called AX, in fact, you have to do anything before the general process, the general idea to think clearly after the action, otherwise it may be half found that this is not right, and then the time in front of all in vain, so the Kai is not ...

In front of a bunch of crap, the following is a simple introduction to my organized icons (all implemented with CSS).

CSS does not inherit, polymorphic, and so on, so in order to write less, does more will have to do a variety of methods (we specify that all public, component-level styles all start with u).

I am here because the style of writing all the labels is the beginning of the U-icon, so write the following style, so that all the beginning of the U-icon all with the following three styles, you think if you have 100 U-icon style that saves you 300 lines of code!

[class^= "U-icon"] {display:inline-block;color: #fff; vertical-align:middle;} The switch tag HTML code on the phone is as follows: <span><i></i></span><span class= "U-icon-toggle on" ><i></ I></span>

The page looks as follows:

CSS style code:

/* Switch tab on phone */.u-icon-toggle{position:relative;width:60px;height:30px;border-radius:30px;box-shadow:0 0 0 1px # E5e5e5;} /* Because this may be added on the parent element on the child element may also be added on so */.on.u-icon-toggle,. On. u-icon-toggle{box-shadow:0 0 0 1px #4089e8; Background-color: #4089e8;}. U-icon-toggle i{position:absolute;top:0;left:0;width:30px;height:30px;-webkit-box-shadow:0 0 2px #bbb; Border-radius:100%;background-color: #fff;-webkit-transition:300ms Linear;-webkit-transform:translate3d (0,0,0);}. On.u-icon-toggle I,. On. U-icon-toggle I{-webkit-transform:translate3d (30px,0,0); The HTML code for various points (Hollow point, solid point, Blue dot, orange dot) is as follows: <span class= "U-ICON-POINTB cur" ></span><span></span>< Span></span><span class= "u-icon-pointo cur" ></span> page shows the following: Using CSS3 to achieve a variety of icon effects CSS style code:. U-ICON-POINTB,. u-icon-pointo{width:6px;height:6px;margin:0 3px;border-radius:100%;/* rounded angle of 100% to achieve the effect of the circle */ box-shadow:0 0 0 1px #6bb5ff;} /* Ticket filter Interface orange dot Icon*/.u-icon-pointo{background-color: #fff; box-shadow:0 0 0 1px #ff5d1d;} /* Blue Dot ICon*/.cur.u-icon-pointb,.cur. U-icon-pointb{background-color: #6bb5ff;/* If the background and boder colors do not match, it is a hollow circle */}. Cur.u-icon-pointo,.cur. U-icon-pointo{background-color: #ff5d1d;} The arrow HTML code is as follows: <span></span><span class= "U-icon-arr u-icon-arrd" ></span><span class= " U-icon-arr u-icon-arru "></span> page display effect is as follows: with CSS3 implementation of various icon effect CSS style code:. u-icon-arr{position:absolute;top:50%; Right:15px;width:8px;height:8px;margin-top: -2px;border-style:solid;border-width:2px 2px 0 0;border-color: #ababab; -webkit-transform-origin:75% 25%;-webkit-transform:rotatez (45deg);-webkit-transition:100ms ease-in. 1s;transition : 100ms ease-in. 1s;}

CSS3 make the icon effect of the tutorial is so many, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How CSS encoding is converted

CSS3 Click to display the ripple effect

CSS3 How to make butterflies dancing animation