Q: 第 30 天了，心中有沒有很興奮？A: 好緊張耶.. 最後一天了來個結語～～ 之前從來沒有想過要參加鐵人賽 當初的對話是這樣的... 同事A：「走啊...
Q: 效能跟效果之間怎麼取捨？A: 如果效果不複雜，用一些渲染成本比較高的寫法也無妨 新屬性搭配動畫來點新效果 本篇介紹一個新的屬性-webkit-back...
Q: 我要下拉選單，黑底跟選單一起推出來呢？還是淡出呢？A: 前幾章的小技巧有掌握好，一切都好上手 之前常常會看到有些網站手機版的下拉選單，樣式主要分為兩種...
Q: 484開始有點詞窮了？A: 寫程式還是比寫文章有靈感吶.. 繼上一篇後，要來為卡片創作出另一種效果～跟上一篇有點類似，但因為程式碼有諸多地方不一樣，所...
Q: 剩下 5 篇來點實用也不實用的範例吧～～A: 畢竟效果還是要看設計的美感，這是很看天份的（望天 今天的主題是「卡片」。在有些形象網站中可以看到產品或是...
Q: 今天的好像沒有範例？A: 文長慎入，但有看有差！！ 動畫不能只是動畫，還要動得不費力 上一篇有提到在做動畫時，改變不同的屬性在重新渲染畫面時的成本會不...
Q: 終於要講效能了！A: 以Loading為範例講黑～ Animation Loading 直線版本 前幾篇有做過Loading效果的動畫，今天延續下去！...
Q: 倒數 8 篇了！逐漸進入養老階段，會一直Loading嗎？A: Loading只是代表，主要是可以看看有哪些變化～～ 幾天前有出個文字版本的Loadi...
Q: 9月的最後一天來點特別的吧？A: 常見的彈窗來一個！ 樣式先做好是很重要的！ 首先來個簡易的按鈕.btn-open來開啟彈窗，然後在彈窗內有個關閉按鈕...
Q: 還有什麼特別的可以寫嗎？A: 可能... 再回去Loading吧(๑¯∀¯๑) 本篇要來做整張圖分隔淡出的效果！換的方式想 ... 就是上面好幾格白的...
Q: 今天是教師節呢，怎麼沒有放假？A: 認真上課黑！本篇是可能實用，但更可能殺光腦細胞的steps阿！ 上一篇在做倒數計時的圓餅圖時，針對animatio...
Q: 這個用Svg做吧？A: 如果你的需求跟我這款一樣，Css就可以畫囉～ 上一篇的時鐘給小編這一篇的靈感！倒數計時的圓餅圖自己做～網路上很多svg的範本，...
Q: 動畫影片看起來卡卡的？A: 請各位見諒，跑起來真真是順暢的呢！ 上一篇的Slot效果以父層固定寬高後設置overflow: hidden，同時子層設定...
Q: 網路上已經很多可以用的隨機選擇器了耶...A: 拉霸的用途很多，看你怎麼用囉～ 已經連續Ｎ篇Loading，本篇跳過Loading篇章，腦袋要來點新東...
Q: 這是小精靈嗎？A: 這是... 吃蛋的小傢伙！（不知道有沒有版權問題呢？） 本篇的靈感來自《小精靈》，但由於不知道有沒有侵犯版權的問題，所以將它變成吃...
Q: 說好的文字Loading呢？A: 客倌這裡上菜囉～ 前幾篇的Loading都是以圖案循環為主，今天比較特別要來做文字版本的Loading，文字可以隨著...
Q: 連假後腦袋不好使呢！A: 腦袋可不可以也Rotate轉起來？ 本篇還是Loading，這次要做的是一個常見的時鐘icon，內部的指針會一直旋轉的Loa...
Q: 還是Loading嗎？A: 一大系列！接下來的樣式會比較不同～ 上兩篇做完圓圈的Loading效果，本篇來個方形的Loading，並給予不同的樣式～...
Q: 今天叫醒你的是什麼？A: 是迷糊中醒來後，看到草稿不見的震撼(✘﹏✘ა) 繼上一篇 Loading 動畫，本篇做的是另一種 Loading 效果，這篇...
Q: 從哪一種Loading開始呢？A: 轉圈圈的Loading應該是基本？ 之後將會進入一系列的Loading效果，本篇只會介紹一款，並對其做比較詳細的說...
Q: 是時候表演真正的技術了？A: 要動起來是少不了animation屬性的！ 本篇開始將使用animation屬性做微動畫，別於transition是在樣...
Q: 是不是來點icon比較知道這是幹嘛的？A: 不複雜的可以用css畫，複雜的可以考慮出圖或是svg！ 繼上一篇已經做出一個置底的彈出式選單，但看著總覺得...
Q: 這個看起來像貓爪的東西是什麼？A: 喵？ 本篇開始將實作選單的微動畫，比較特別的要來說說transform的順序帶給動態效果的影響！ 謎音1：本次示...
Q: 請問icon要怎麼出圖好呢？A: 一定要用圖片嗎？ 本篇要實作的是「加到最愛」的按鈕，結合之前所述的偽元素，以不使用圖片的方式做出圖案，讓按鈕可以有更...
Q: 想要電腦上的開關按鈕看起來跟App上的一樣，可以嗎？A: 想要什麼顏色的呢？ 介紹完transition後，接下來這篇的實作案例會運用比較基礎的js針...
Q: 別人網站上看到的動態效果變化很多，還是引寫好的套件(庫)進專案吧？A: 只引進一個套件(庫)就可以滿足你的需求嗎？還是要引進很多個？ 偽元素也是製作「...
Q: 網路上找到的看起來都很厲害，程度能比嗎？A: 厲害歸厲害，每個效果都適合你的網站嗎？ 讓元素對使用者的操作有「回應」可以讓使用者有跟網頁「互動」的感覺...
Q: 為什麼別人的按鈕點起來比較有感覺？ A: 因為外國的月亮比較圓？ 網頁中常常會有很多可以點擊的地方（按鈕或是超連結），有些網站的按鈕讓人覺得「只是按鈕...
Q: 不會設計怎麼辦？A: 小編也不會設計，但可以把別人的設計變成網頁！ 本篇開始將使用transform跟transition屬性做微動畫，透過操控這兩個...
Q: 很多免費的現成的套件可以直接套用就有效果，拿來用吧？A: 真的有比較好用嗎？ 網頁的組成離不開html的架構及css的樣式，除了放上會動的圖片之外，...
粒粒
iThome鐵人賽
看影片追技術