如何使用css3實現各種圖標效果

這篇文章主要為大家展示了如何使用css3實現各種圖標效果，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“如何使用css3實現各種圖標效果”這篇文章吧。

公共樣式

應該說現在絕大多數公司的項目前端都是一團亂，不僅僅是js寫的沒有任何框架而言，css同樣也是如此，導致項目如果要升級或者說有新的變更維護起來就特別困難。

最近領導決定花大時間整理一下css樣式，用他的一句話來說就是為后來者造福。

首先我們在整理樣式之前，必須得有一個自己團隊的規范。

思考真的很重要，所謂的磨刀不誤砍柴工，事實上也就是說你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再動手，否則就可能做到一半發現這樣不對，然后前面的工夫全白費了，這樣啟不是。。。

前面說了一堆費話，下面就簡單點來介紹一下我整理的圖標（全部用css來實現的）。

css沒有繼承、多態等，所以為了write less ,do more就不得不想盡各種方法（我們自己規定凡是公共的、組件級別的樣式全部以u-開頭）。

我這里因為寫所有標簽的樣式名都是以u-icon開頭，所以寫了如下樣式，這樣的話所有的以u-icon開頭的全部都應用了如下三個樣式，你想如果你有100個u-icon的樣式那就省去了你300行代碼呀！

[class^="u-icon"]{

display: inline-block;

color: #fff;

vertical-align: middle;

}

手機上的切換標簽

html代碼如下：

<span class="u-icon-toggle"><i></i></span>

<span class="u-icon-toggle on"><i></i></span>

css樣式代碼：

/*手機上的切換標簽*/

.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 class="u-icon-pointB"></span>

<span class="u-icon-pointO"></span>

<span class="u-icon-pointO cur"></span>

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 class="u-icon-arr"></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;

}

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關于“如何使用css3實現各種圖標效果”的內容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。