original codepen Twitter's Heart Full CSS by Nicolas Escoffier


three layer:

heart

調整為 transform: scale()
以簡化 CSS rules,並可獲得較高效率的繪製

因為這顆刻法很帥的愛心跟 Twitter 的其實也長得不太一樣
所以我就自己刻了一個~ :P
用單一元件跟謎樣的 border-radius + transform 畫了個愛心~

ring

大小的變化一樣調整為 transform: scale()
因為這個圈圈需要鏤空,所以填色方式便需要調整,
不能用簡單的 background-color 處理掉
原本的版本是使用了 border + width 還組合出空心效果
但這邊我改用 insetbox-shadow
透過調整 spread-radius 來控制,即可同時達成填滿與鏤空的需求
雖然 box-shadow 也會造成 re-paint,但至少可以避開 layout 的變化 :)

box-shadow 顏色變化一般是跟著 color 變化的
但是在 Chrome, color 的過渡過程穿不到 box-shadow 的顏色變化
這點有時蠻惱人的

另一點是 ring 的初始尺寸調整
這邊就有些不一樣的處理作法了
我採用的是"先設定最大值"(x1.7),
有些時候則是會用繼承 (x1)的比較易讀子代的相對大小
會直接用最大值則是考慮到 scale 值大於 1 後就會有邊緣模糊的狀況
雖然這 blur edge 在小尺度上是可以忽視的,但也沒什麼差

ps: scale(1.1)是為時很短的彈性效果,不想把它視為安定的極值

circles

這邊原作者寫的 sass function 還不錯~ 就沒改了 哈哈哈


我調整後如下~

my version http://codepen.io/Rplus/pen/advXwj,
fork from http://codepen.io/OxyDesign/pen/avXVbo/


586 0 0