[網頁設計] 八種讓您驚艷的 CSS 過場動畫
CSS 3.0 能提供許多讓人驚艷的過場動畫,而且不需要太高深的程式設計技巧。基本上把下面網址提供的 CSS 原始碼拷貝貼上,再於小處修改一下即可。
對於 CSS 在網頁設計所扮演的角色不熟的朋友,容我說明一下:一個網頁,HTML 負責用標籤標示出「這裡到這裡是主標...那裡到這裡是一個段落...」,也就是 HTML 負責「內容結構」得標定。CSS 則是負責排版。如「標示為『主標』的,要對中、18 點字、標楷體」,「標示為『段落』的,要與下一個段落空一列」...等等。高深一點的 CSS 技巧,就是一些「過場動畫」了。下面提供的網址,不僅把 CSS 做過場動畫的原始碼標示出來,還讓你親手把玩最後的效果。英文苦手的朋友也不用太擔心,只要先玩一下效果,覺得滿意,把上方的程式碼拷貝貼上,頂多標籤名稱修改一下,就可以套用在您的網頁了。
有興趣的朋友不妨試試看!有問題請留言在下方喔!
http://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
css等高 在 紀老師程式教學網 Facebook 的最讚貼文
[WebTech #57] CSS > 1. 簡介
開始涉入 CSS3 語法的世界!
這篇要分享的有兩篇文章!第一篇講的是「CSS 語法格式」、「套用方法」、「字體設定」。第二篇講的是「選擇器」、「自動折行」、「文字渲染」、「多欄排版」、「邊框與填色」、「漸層」、「陰影」、「多重背景」、「過場動畫」等高級功能。雖然兩篇文章是不同人寫的,但我發現一前一後搭起來,居然合拍極了!所以我就將它們放在一起、提供給大家了!
第一篇:CSS 入門功能(語法、套用、字體)
http://www.ibm.com/developerworks/cn/web/wa-getstartedcss/
第二篇:CSS 進階功能(折行、渲染、多欄、漸層、陰影、動畫...)
http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/