2016/01/16 開票結束後,
因為看到有網友做了這個很有趣的 689 翻轉 GIF
於是抽空用 CSS 實作看看~

一開始寫的版本是藍底,
然後綠色上層加上 opacity 的 animation 變化
不直接拿 background-color 做 animation 是因為要避免 re-paint ~

689 - Taiwan Flip

http://codepen.io/Rplus/pen/rxGRQo

但做完後覺得不太舒爽,
因為藍色一直壓在底邊,感覺毛毛的,
所以又修正調整了一下:

第二版就直接將藍綠兩色各寫在對等的兩層 pseudo-element 上
剛好一個叫 ::before,另一個叫 ::after 非常語義化~ 哈哈哈~
再順便調整一下顏色,改用比較好看出來的變數名稱代替原本的藍綠色碼

689 - Taiwan Flip v2

http://codepen.io/Rplus/pen/yePNLL

這個效果我覺得很好,
不只是詼諧的藍綠翻轉,
更是在提醒新上任者,務必傾聽民意,不然就等著被翻盤吧~


500 0 0