CSS3的过渡转换与动画.PDFVIP

第7章 CSS3 的過渡、轉換、與動畫 第7章 CSS3 的過渡、轉換、與動畫 - 網頁中的動態元素 * 過去：全部利用JavaScript (或jQuery) 產生動態效果 * 目前：CSS3 已有許多產生動態效果的功能，例如滑鼠縈繞，元素在網頁上移動等 (1) CSS3 的過渡效果 (1) CSS3 的過渡效果 - 滑鼠縈繞(Hover) * 滑鼠移至連結元素時，產生縈繞效果，讓使用者知道可以點選 * 滑鼠縈繞有兩個狀態(State) ：開或關(On/Off) ，而CSS3 可讓元素在此2 狀態產生過 渡(Transition) 的視覺效果 - 過渡(Transition) * 4 種特性 # transition-property ：需加上過渡效果的CSS 屬性名稱(例如：background-color, text- shadow, 或 all) # transition-duration ：過渡的時間( 以秒計，例如2s, 0.3s) # transition-timing-function ：過渡時間中如何改變轉換速度(例如：linear, ease-in, ease-out, ease-in-out, 或 cubic-bezier) # transition-delay ：過渡效果產生前的延遲( 以秒計，例如：0s, 2s) * 以上的過渡時間函數(transition-timing-function)如右圖所示 * 例如(可能需要前綴) ： a { color: black text-decoration: none transition-property: all transition-duration: 1s transition-timing-function: ease transition-delay: 0s } a:hover { color: red text-shadow: 2px 2px 2px gray font-size: 300% font-weight: bold } * 也可以使用較簡短的寫法(所有變化，在一秒內過渡，舒緩變化方式，沒有延遲) ： a { ... transition: all 1s ease 0s } * 也可以設定同一元素使用不同過渡方式，例如設定字體尺寸、顏色、文字陰影的 過渡時間分別為2 秒、3 秒、及 8 秒： a { 7-1 color: black text-decoration: none transition-property: font-size, color, text-shadow transition-duration: 2s, 3s, 8s } - 練習：修改 oscar6-3.html 及 oscar6-3.css ，並另存新檔為oscar7-1.html 及 oscar7-1.css * HTM ： # 修改 CSS 連結link rel=stylesheet href=css/oscar7-1.css # 另加一項CSS 連結link rel=stylesheet href=css/oscarEffect7-1.css # 將#content 裡的電影名稱加上連結 p像 ba href=/title/tt0360717/金剛/a/b 、 ba href=/title/tt0203009/紅磨坊/a/b 、 ba href=/title/tt0408306/慕尼黑/a/b 等電影都得獎,但真正的電影英雄卻都沒得獎 ,一點也沒有好萊塢精神,不是嗎?/p * CSS ： # 建立新檔案：oscarEffect7-1.css ，儲存至css 目錄中 # 將#content 裡的連結加上滑鼠縈繞效果：