卡斯伯提供的教學資源:


css

Animation 的各項設定值

和其他屬性一樣,animation有許多屬性可以設定,當然也可以用一個animation涵蓋全部,以下會分別介紹以下屬性的用途。 來源:http://css.doyoe.com/ [ animation-name ]:設置物件所應用的動畫名稱(必填) [ animation-durati...

css

Animation 和 keyframe

CSS的Animation分為兩個部分,一個是決定動畫該如何跑的Keyframe,另一個是將動畫載入元素的Animation。簡單來說,就是先製作一個keyframe來決定動畫的影格動作,在將動作載入元素,而這兩個都是必要的。...

css

CSS沒有極限 - 鐵人賽不是開始,也不是結束

在鐵人賽前一個月,我在進行一個計劃,就是挑戰100天發文,內容以前端為主,雖然每天都有新的文章,但我都不會特別去核對文章的內容。而鐵人賽開始後,將主題調整為CSS為主,內容也不是只將demo貼上後隨便貼個原始碼就結束了,許多內容都必須去尋找相關的資料,讓主題及內容更加可看性,這過程中也讓CSS的基礎...

css

CSS沒有極限 - CSS 的相關資料

今天沒有要介紹任何效果,是要介紹這些CSS資料是從何處獲得的。...

css

CSS沒有極限 - pure CSS 專輯列表效果

鐵人賽快要結束了,今明兩天會介紹純CSS可以做些什麼特別的效果。今天要介紹的是專輯相簿的效果。...

css

CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇介紹的transform 3D的透視,如果沒有設定透視(perspective),transform 3D就會像平面一樣呈現。所以在3D的物件上,一定要設定好"適合"的透視,怎樣是適合,來看看以下範例就能夠了解。...

css

CSS沒有極限 - CSS transform-origin

本篇介紹transform的起始點,一般來說變形的起始點都在物件的中心點,但如果需要像時鐘的分秒針一樣,中心點並不再物件的中心,就需要靠transform-origin去設定物件變形的起始點。...

css

CSS沒有極限 - CSS transform 軸線的謊言

從小上數學課,都會知道X軸是左右,Y軸是垂直,看起來就是這麼容易,但是一到了CSS上卻是常常分不清楚,而其中最大的陷阱就是旋轉(rotate)。這篇會用簡單的動態效果,讓大家了解旋轉與軸線之間的關係(本篇都是使用sass)。...

css

CSS沒有極限 - CSS transform 概觀

接下來要介紹CSS transform,CSS3許多新功能中,我認為transform和animation是相當有難度的,但也是最有趣的,尤其在兩者搭配後,能夠展現出類似過去flash的動態效果,但卻能保持html原有的互動性。 而在接下來的四至五天會分享transform相關的屬性運用。...

css

CSS沒有極限 - Checkbox的妙用

CSS3 新增了:checked的偽元素,它可以判斷目前的checkbox 及 radio 是否有被選核,這樣html就能夠做出基本的點擊功能;並且結合label標籤,label標籤能夠讓樣式的套用更為自由,藉此增加畫面的豐富性。...

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))
撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))