超詳細,完整原生 CSS Function
本文件從最基本的 background url(...)
一直到深入的 filter brightness(...),均有詳細列出
CSS 有部分函式真的很狂
如 Calc 來說,它可以做到跨單位的運算
就像是 10 英尺減 10 公分的概念
更多的內容,可詳閱本份文件
文件分類包含:
- 通用類型(大部分屬性皆可運用)
- 自訂義屬性(var)
- 色彩函式
- 元素選取器
- 動畫函式(Animation)
- 變形函式(Transform)
- 過濾特效函式
- 漸層
- 格線工具
- 形狀(可以使用 CSS 繪製方形、多邊形等方法)
- 其它
- 部分棄用的函式
#我還不練爆
#CSS超
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
css animation屬性 在 紀老師程式教學網 Facebook 的最讚貼文
[WebTech #61] CSS > 4. CSS 範例 > 4-1 文字相關實例
CSS 事實上就是「匹配規則(Selector)」+「套用屬性(Properties)」而已!如果您在 [WebTech #59] 看過所有 30 種常見的匹配規則,也在 [WebTech #60] 看完了所有可供套用的屬性,那麼您的 CSS 語法已經全部學完了!
接下來想要精通 CSS,只有看大量的範例了!看的越多,您越能了解剛剛那兩篇學的「匹配規則」與「套用屬性」,到底要用在哪個場合上。所以,接下來我將會分門別類地提供大量的 CSS 範例給各位參考。這些範例大多附有「解說」、「原始碼」、「線上示範」三樣東西。您只要點進去,看完解說,把原始碼貼到我今天推薦的 CodePen 上去試試看,或者直接看線上範例即可。需要的話參考一下我在每篇最下方提供的「CSS Selector & Properties 參考手冊」,刷新記憶,相信您的 CSS 一定可以學得很好!
首先上場的是「文字相關屬性」。坐穩囉!我們就開始吧!
文字相關變化:
- 會旋轉的文字: http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/
- 跑馬燈: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
- 項目編號: http://www.red-team-design.com/css3-ordered-list-styles
- 圖說文字(游標移上去,會額外出現的說明文字)
* 文字型: http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-link-tooltips-using-css3-and-jquery/
* 圖片型: http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp