Shulou(Shulou.com)06/02 Report--

This article mainly shows you how to use css3 to achieve a variety of icon effects, the content is easy to understand, clear, hope to help you solve doubts, the following let the editor to take you to study and learn "how to use css3 to achieve a variety of icon effects" this article.

Common style

It should be said that the front end of the project in most companies is a mess, not only for js without any framework, but also for css, which makes it particularly difficult to maintain projects if they want to upgrade or have new changes.

Recently, the leader decided to spend a lot of time tidying up the css style, which, in his words, is for the benefit of later generations.

First of all, before we organize the style, we must have a specification of our own team.

Thinking is really important. The so-called sharpening knife does not make mistakes in chopping firewood. In fact, it means that you have to think clearly about the general process before doing anything, otherwise you may find that this is wrong in half. Then the previous work was wasted, so it wasn't.

Having said a lot of expensive words, let's briefly introduce the icons I organized (all implemented in css).

Css has no inheritance, polymorphism, etc., so do more has to do everything it can for write less (we stipulate that all public, component-level styles start with u -).

I write here because the style names of all tags start with u-icon, so I write the following style, so that all the ones that start with u-icon apply the following three styles. You think if you have 100 u-icon styles, it will save you 300 lines of code.

[class^ = "u-icon"] {

Display: inline-block

Color: # fff

Vertical-align: middle

}

Switch tags on the phone

The html code is as follows:

Css style Code:

/ * switch tags on the phone * /

.u-icon-toggle {

Position: relative

Width: 60px

Height: 30px

Border-radius: 30px

Box-shadow: 0 0 0 1px # e5e5e5

}

/ * because here you may add on to the parent element or on to the child element, 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 2px # bbb

Border-radius: 100%

Background-color: # fff

-webkit-transition: 300ms linear

-webkit-transform: translate3d (0j0pc0pl 0)

}

.on.u-icon-toggle I, .on .u-icon-toggle I {

-webkit-transform: translate3d (30px1990pg0)

}

Various points (hollow, solid, blue, orange)

The html code is as follows:

Css style Code:

.u-icon-pointB, .u-icon-pointO {

Width: 6px

Height: 6px

Margin: 0 3px

Border-radius: 100% ram * the round effect is achieved when the fillet is 100% * /

Box-shadow: 0 0 0 1px # 6bb5ff

}

/ * ticket screening 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: # 6bb5ffTipple * Hollow circle if the background and boder are not the same color * /

}

.cur.u-icon-pointO,.cur .u-icon-pointO {

Background-color: # ff5d1d

}

Arrowhead

The html code is as follows:

The effect of the page is as follows:

Realize all kinds of icon effects with css3

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

}

What are the selectors of css? css selectors can be divided into three categories, namely, id selector, class selector and tag selector. There can be many combinations between them, such as descendant selector, sub-selector, pseudo-class selector, general selector, group selector, and so on.

The above is about "how to use css3 to achieve a variety of icon effects". If this article is helpful and well written, please share it with your friends to learn new knowledge. if you want to know more about it, please pay more attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.