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

成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)達(dá)川,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

公共樣式

應(yīng)該說現(xiàn)在絕大多數(shù)公司的項(xiàng)目前端都是一團(tuán)亂，不僅僅是js寫的沒有任何框架而言，css同樣也是如此，導(dǎo)致項(xiàng)目如果要升級或者說有新的變更維護(hù)起來就特別困難。

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

首先我們在整理樣式之前，必須得有一個自己團(tuán)隊(duì)的規(guī)范。

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

前面說了一堆費(fèi)話，下面就簡單點(diǎn)來介紹一下我整理的圖標(biāo)（全部用css來實(shí)現(xiàn)的）。

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

我這里因?yàn)閷懰袠?biāo)簽的樣式名都是以u-icon開頭，所以寫了如下樣式，這樣的話所有的以u-icon開頭的全部都應(yīng)用了如下三個樣式，你想如果你有100個u-icon的樣式那就省去了你300行代碼呀！

[class^="u-icon"]{

display: inline-block;

color: #fff;

vertical-align: middle;

}

手機(jī)上的切換標(biāo)簽

html代碼如下：

css樣式代碼：

/*手機(jī)上的切換標(biāo)簽*/

.u-icon-toggle{

position: relative;

width: 60px;

height: 30px;

border-radius: 30px;

box-shadow: 0 0 0 1px #e5e5e5;

}

/*因?yàn)檫@里可能會在父元素上加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);

}

各種點(diǎn)（空心點(diǎn)、實(shí)心點(diǎn)、藍(lán)色點(diǎn)、橙色點(diǎn)）

html代碼如下：

css樣式代碼：

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

width: 6px;

height: 6px;

margin: 0 3px;

border-radius: 100%;/*圓角為100%就實(shí)現(xiàn)圓的效果*/

box-shadow: 0 0 0 1px #6bb5ff;

}

/*機(jī)票篩選界面橙色點(diǎn)icon*/

.u-icon-pointO{

background-color: #fff;

box-shadow: 0 0 0 1px #ff5d1d;

}

/*藍(lán)色點(diǎn)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代碼如下：

頁面顯示效果如下：

用css3實(shí)現(xiàn)各種圖標(biāo)效果

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選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關(guān)于“如何使用css3實(shí)現(xiàn)各種圖標(biāo)效果”的內(nèi)容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。