FB event:
https://www.facebook.com/events/695238003988710/

GitHub repo:
https://github.com/Happy-CSSer/Happy-CSSer/blob/master/2017-04-09/

這週我們選的主題是當時很紅的 紅色 logo - Nintendo Switch
https://www.nintendo.com/switch/

雖然事前有另一個提案，不過因為它的 LOGO 用 CSS 較難實現，所以還是來玩玩這個 LOGO 動畫要怎麼做吧~

一開始有先分析一下 N 社官網的作法，
滿常見的 CSS image sprite 作法，
而且是搭配 JS 處理 background-position，讓相容性更高一些
當然，要是你開心也可以用 CSS aniamtion steps timing function 處理完啦~

這是我的成品

[CSS] Animated Nintendo Switch Logo
https://codepen.io/Rplus/details/xqvKWv

因為構圖相對簡單許多
所以結構上直接選擇使用單一結點 single element

在處理這種可縮放的形狀時，我是滿喜歡用 em 來控制大小及相對位置的
這樣只要在不同 class 下不同的 font-size 就能輕鬆寫意地調整元件的尺寸
在這例子中可以看到 source code ，就只是使用單一字級屬性就能控制這塊元件的尺寸:
(當然這技巧也有適用範圍，有時會被瀏覽器最小字級干擾到~)

.logo {
  &.small {
    font-size: 20vmin;
  }
}

雖然我會建議到現場才開始撰寫 CSS，
但其實我更推薦事前做些功課，不管是思考、找資料、確認 spec 等等都好
這樣你在現場能更快地完成作品，而且能更有餘裕地檢討實作，或是到處串門子 & 干擾朋友寫程式

下面是我拿來分析原圖動畫的輔助頁面：
https://codepen.io/RplusTW/pen/JWgPBj

從上面那頁可以看出兩邊的動畫究竟是怎麼跑的
調動畫時才比較不會一直看那動來動去的圖看到眼花 @_@

而只有先釐清了動畫的順序，才能更好地對結構配置與排版
所以事前的思路與功課會很有幫助

廢話有點多，進 code~

主要思路是用兩個 pseudo-element 來完成左右兩邊
所以勢必要一個 pseudo-element 就做完一邊
在這樣的限制前提下，能選用的屬性相對地就少了許多
不過這也是小小的挑戰

左右兩邊的弧形其實比較不是問題，因為 CSS 頂多用 border-radius 處理簡單的弧形
再複雜一點的可能就要用 clip-path 或搭配上 svg mask
這邊想當然就挑簡單的 border-radius 處理就好 XDD
兩邊中心的圓圈反而比較是麻煩的點

一般來說，CSS LOGO 我都是盡量鏤空，而不用遮蓋、硬刷底色的方式處理
所以我選擇使用 background-image 的 radial-gradient 來做小圓圈
這邊圓形漸層有個學來的小技巧，

在兩個顏色的交界設 1px 的過渡，
可以避免部份瀏覽器渲染時的鋸齒狀況
例： radial-gradient(red 30%, blue calc(30% + 1px))

而左邊的線框有人喜歡用 border 做，我則是比較習慣用 box-shadow 處理
因為 box-shadow 能讓子代定位比較無腦，不用去思考定位圓點被親代的 border 擠歪了 :P

動畫 keyframes 部份就看個人對原圖怎麼理解了，這邊也沒什麼太講究的東西
不過若是在處理 transform 動畫，比較建議先處理狀態，再去思考過渡
也就是先定點、再畫線、最後修面

這次活動裡也有跟大家分享一個 demo animation 的技巧：純 CSS 重置動畫

一般 CSS 動畫若沒設定 animation-iteration-count 的話，它就跑個一次就停了
當然，我們這次的作品也只希望它動一次就夠了
（ 不然一天到晚跳來跳去的 LOGO 就不是 LOGO，而是 loader 了 XDDD
但 logo 只動一次在開發時就比較麻煩，因為你要重看動畫就要重整頁面，很煩！

所以必須想個方法讓 CSS animation 重新觸發
最直覺的方式是用 JS 控制 class，讓瀏覽器覺得這個動畫該重跑一次
但我們這裡是 Happy CSSer，能用 CSS 硬上的 hack 才會讓我們更加地 HaPPy 呀~ A_A

既然 class 沒法隨便套用，那就用 pseudo-class！

能用滑鼠簡單控制的 pseudo-class 應該就 :hover 跟 :active 了
所以我們可以在這兩個狀態下，重新給定另外的 animation-name，這樣瀏覽器就會重置動畫了唷 <3

具體寫法可以參考: GitHub repo

大致上就這樣啦~

啊，還有件事就是這 LOGO 的設計其實挺細的
首先，它不是左右一樣寬，因為左邊是線框、右邊是填色
白色好像會有視覺膨脹的效果(?)，所以右邊比較瘦一些
而同樣的，兩顆小圓圈也是不同大小，都有視覺修正唷~ 啾咪

這麼細的比例幫然不是從官網上直接看 LOGO 看出來的
是從 WIKI 載下來 LOGO 的 SVG 檔去算比例的 XDDDDD

這週就這樣啦~

其實寫文章跟活動分享也滿類似的
有不少技巧遇到或想到什麼才會記起來，
所以遇到情境就會先想想自己瞭不瞭解，
不懂就直接問，問到了就賺到，問倒了就大家出來喬，啊不是，是一起探討
但其實看其它的鐵人文，大部份底下也都沒怎麼有提問 哈哈哈