怎樣用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><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></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;}

css3做出表徵圖效果的教程就是這麼多了，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS的編碼怎麼轉換

css3點擊顯示漣漪特效

CSS3怎麼製作蝴蝶飛舞的動畫