How to use css3 to create icon effects

Speaking of current company projects, I believe that the front-end of many companies is a mess, not only because JS does not have a framework, but CSS does not use a framework, which leads to projects that need to be upgraded or maintained if needed. It's extremely difficult.

Recently, the leader decided to spend a lot of time sorting out the css style. In his words, it will benefit those who come after us.

First of all, before we organize the styles, we must have a standard for our own team.

Thinking is really important. The so-called sharpening the knife does not waste time cutting wood. In fact, it means that before you do anything, you must think through the general process and general ideas before you start, otherwise You may find out halfway through that this is wrong, and then all the previous efforts will be wasted, and this will not work. . .

I have said a lot of wasteful words before, now I will briefly introduce the icons I have compiled (all implemented with css).

CSS does not have inheritance, polymorphism, etc., so in order to write less and do more, we have to think of various methods (we have stipulated that all public and component-level styles start with u-).

Because the style names of all tags I write here start with u-icon, I wrote the following styles. In this case, all the styles starting with u-icon have the following three styles applied. What do you want? If you have 100 u-icon styles, you will save 300 lines of code!

[class^="u-icon"]{
display: inline-block;
color: #fff;
vertical-align: middle;
}
手机上的切换标签
html代码如下：
<span><i></i></span>
<span class="u-icon-toggle on"><i></i></span>

The page display effect is as follows:

css style code:

/*手机上的切换标签*/
.u-icon-toggle{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
}
/*因为这里可能会在父元素上加on 也可能在子元素上加on 所以*/
.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);
}
各种点（空心点、实心点、蓝色点、橙色点）
html代码如下：
<span class="u-icon-pointB cur"></span>
<span></span>
<span></span>
<span class="u-icon-pointO cur"></span>
页面显示效果如下：
用css3实现各种图标效果
 
css样式代码：
.u-icon-pointB, .u-icon-pointO{
width: 6px;
height: 6px;
margin: 0 3px;
border-radius: 100%;/*圆角为100%就实现圆的效果*/
box-shadow: 0 0 0 1px #6bb5ff;
}
/*机票筛选界面橙色点icon*/
.u-icon-pointO{
background-color: #fff;
box-shadow: 0 0 0 1px #ff5d1d;
}
/*蓝色点icon*/
.cur.u-icon-pointB,.cur .u-icon-pointB{
background-color: #6bb5ff;/*如果背景和boder颜色不一致 则为空心圆*/
}
.cur.u-icon-pointO,.cur .u-icon-pointO{
background-color: #ff5d1d;
}
箭头
html代码如下：
<span></span>
<span class="u-icon-arr u-icon-arrD"></span>
<span class="u-icon-arr u-icon-arrU"></span>
页面显示效果如下：
用css3实现各种图标效果
 
css样式代码：
.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;
}

There are so many tutorials on how to make icon effects in css3. For more exciting content, please pay attention to other php Chinese websites. related articles!

Related reading:

How to convert CSS encoding

css3 click to display ripple effects

CSS3How to create an animation of flying butterflies

The above is the detailed content of How to use css3 to create icon effects. For more information, please follow other related articles on the PHP Chinese website!