練習用css畫圖

CSS這東西看似簡單! 但其實富有很多變化!!

所以今天我就自己給自己出了個題目來練習一下!!

成品連結如下:
http://plnkr.co/edit/S5fL0JTeJE8eiLOEJBXc?p=preview

其實做這東西是要想要練習一些我以前沒用過的CSS功能!

1.:after 和 :before 擬元素!
2.畫三角形
3.畫橢圓形
4.畫梯形
5.還有position的使用( 雖然我知道 absolute 和 relative 作用但有時很複雜會分不太出來

我的做法是先在illustrator中畫好設計圖! 然後再去寫CSS!

先在illustrator中畫好的話，我覺得我在改寫成CSS的時候對於空間位置、物件大小和色彩比較好掌握!

不然直接憑空寫成CSS對我來說還有點難度! ( 可能再多練個幾次應該可以吧...

實做過後我覺得 :after和:before還不錯用!

好用在於可以省下一些標籤語法! 而且如果原本的Dom物件移動的話跟著 :after(或:befort)的Dom物件也會跟著移動! 這樣感覺可以省一些做動畫的程式碼!

然後畫圖的部分其實基本上都是靠改 div 的 border去做!

其實我本來不會畫橢圓!

因為雖然圓角指令很簡單! 比如就一個 border-radius:10px 就好!

但是如果你只是一個長方形下圓角命令!

畫出來的形狀是「膠囊型」不是「橢圓型」! ( 這差很多......

後來我發現若寫成 border-radius:10px / 5px 這樣就會變成橢圓形!  (5px 只是舉例!

針對不同的長方形要用不同的數值!

後來我自己試過一些數據後發現一個簡單的比例原則!

如果說你的方形長100px寬50px!

那圓角的比例只要這樣寫 border-radius:30px / (30/100/50) px!

這樣就會變成一個正常的橢圓形了!

而至於三角型和梯型呢! 其實都是用 div 的 border 來畫的!

兩個的概念其實一樣!

因為 div 的邊框會以 對角相接的方式接起來!

所以只要充分利用這點就可以把三角型畫出來!

舉例來說

border-top: 25px #fff solid;
border-right: 20px red solid;
border-bottom: 2px greed solid;
border-left: 20px blue solid;

這會畫出4個三角形! 第一個屬性值是三角形的高! 第二個屬性質是顏色! 第三個是框線樣式!

最重要的是第一個屬性值! 靠這個屬性值我們就可以畫出各式各樣的三角形!

而梯形和這同樣道理! 只是梯形多了一個上底! 而上底就是以 div 的盒內距離來做!

比如說設定 width:50px; height:50px;  那上底就是50px!

有個心得!

因為要計算一堆長寬高和比例數值的東西! 計算機超常用到的....

以後畫這個一定要準備一台電子計算機在身邊! (附屬應用程式的小算盤不好用....


其實畫完之後我有試著寫一個directive的行為來做無限loop的動畫!

var setClass=function(){
       element.removeClass("effect").addClass("effect");
       $timeout(function(){
           setClass();
       },3000);
}
setClass();

我讓它不斷呼叫自己，雖然它也真的有不斷在loop了!

但動畫效果只跑一次! 因為 removeClass 沒有作用! 但 addClass 有作用!

以致於 effect這個 class 就一直存在標籤裡不會被 remove 掉所以無法達到不斷動畫的效果! > <

為什麼 removeClass沒有效果呢? 這我可能要找時間再測試看看!.....

http://plnkr.co/edit/M25mQzUzi5YEx2qdTYvA?p=preview