每次要用到圖標(biāo)的時(shí)候都會到 icono 去copypaste，但每次用到的時(shí)候尺寸都各不一樣，總是要調(diào)整參數(shù)，巨煩。當(dāng)然你可以會想到用zoom、scale來做縮放，但是這樣的縮放會使得線寬也變粗了，不甚滿意。
終于下定心思來改造一個(gè)可縮放的圖標(biāo)庫。github先上：https://github.com/qieguo2016/iconoo，目前提供下載link標(biāo)簽引入和npm+webpack的引入方式，詳見項(xiàng)目的readme。（喂，求star?。?/strong>
關(guān)于改造，一開始的想法就是使用百分比尺寸來改造，然后馬上發(fā)現(xiàn)不可行了，繪制圖標(biāo)最依賴的兩種手段：border、box-shadow都不可以用百分比，所以這個(gè)想法，pass！然后很自然就想到了在單位上做文章，rem？No、No、No，一個(gè)庫依賴全局變量那簡直是個(gè)笑話。剩下的自然就是em了，在icon級設(shè)置font-size，然后icon本身以及后代都以這個(gè)font-size為參照，Perfect！
CSS繪圖的原理
使用CSS繪制線條，用到的不外乎兩個(gè)屬性：border & box-shadow。而形狀則可以用border-radius、transform控制，位置會用到絕對定位、transform、margin等。CSS的繪圖，做過幾個(gè)就知道大概是怎么回事了，歸根到底，還是幾何。
比如最簡單的加號：
View Code
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式