系列文章
( Day 1 ) 從 CSS 開始，學會觀察世界的節奏
大家好，我是 OXXO ( OXXO.STUDIO )，今年第 N 次參戰 iT 邦幫忙鐵人賽，我決定選擇了一個自己最熟悉、也最有熱情的主題：「關於那些有趣的...
( Day 2 ) 純 CSS 製作圓餅圖
這系列的第一個效果就獻給「圓餅圖」了！記得第一次接觸圓餅圖，是在 PowerPoint 裡面用圖表的方式產生，當我轉職為前端工程師之後，就不斷嘗試要用各種框架在...
( Day 3 ) 純 CSS 製作 Google 載入動畫
好幾年前第一次看到 Google 圓形翻頁載入動畫時，就讓我下定決心，一定要用純 CSS 把它給做出來！所以當時就使用了 CSS 動畫和變形，真的用純 CSS...
( Day 4 ) 純 CSS 製作跑馬燈效果
還記得第一次看到網頁的「跑馬燈」效果，是我大學時期的計算機概論課，使用 front page 內建的效果功能，當時因為瀏覽器不像現在進步 ( Netscape、...
( Day 5 ) 純 CSS 電子時鐘數字 ( 七段顯示器數字 )
記得當時在玩物聯網時，第一眼看到「七段顯示器」，就想要用 CSS 手刻這個效果，後來還真的用虛擬元素把它做了出來，隨著年齡增長，再次看到這個效果時，又手癢把它拿...
( Day 6 ) 純 CSS 漸層色邊框
最近南部陰雨綿綿，期盼一切都好，望著窗外的雨將外牆染成了漸層的灰色，我想不如就來用 CSS 做個漸層色邊框吧 ( 一點關係也沒有 )，其實主要是接觸漸層色之後，...
( Day 7 ) 純 CSS 漸層色製作圖案背景
某天看著圍牆上重複且整齊劃一的幾何圖案，突然靈光乍現，這些圖案能不能運用 CSS 來完成呢？多番思量想家鄉，腦中靈光忽閃亮，漸層色彩鋪成景，花樣背景美非常。 (...
( Day 8 ) 純 CSS 漸層色製作星空背景
手牽手，一步兩步三步四步望著天，看星星，一顆兩顆三顆四顆連成線，背對背，默默許下心願，看純的 CSS 是否聽得見，它一定實現～( 有人知道這首歌嗎？ ) 正文...
( Day 9 ) 純 CSS 漸層色的轉場與動畫
還記得交響情人夢最後一集在海邊的那個美麗傍晚，野田妹甜甜的笑著，背後橘紅色的天空慢慢變成了紫紅色，我心想，天呀！不知道純的 CSS 可不可以做出這種漂亮的漸層轉...
( Day 10 ) 純 CSS 彈跳的正方形動畫
高雄人應該都知道，文化中心旁的一新書局，有許多驚喜的捏捏樂舒壓小玩具，某天我正當擠壓得不亦樂乎，手中的正方體掉到了地上，看著這個 Q 彈的正方體，心想不如用純...