第 7 章 CSS3 的過渡 轉換 與動畫 - 網頁中的動態元素 * 過去 : 全部利用 JavaScript ( 或 jquery) 產生動態效果 * 目前 :CSS3 已有許多產生動態效果的功能, 例如滑鼠縈繞, 元素在網頁上移動等 (1) CSS3 的過渡效果 - 滑鼠縈繞 (Hover) * 滑鼠移至連結元素時, 產生縈繞效果, 讓使用者知道可以點選 * 滑鼠縈繞有兩個狀態 (State): 開或關 (On/Off), 而 CSS3 可讓元素在此 2 狀態產生過渡 (Transition) 的視覺效果 - 過渡 (Transition) * 有 4 種特性 # transition-property: 需加上過渡效果的 CSS 屬性名稱 ( 例如 :background-color, textshadow, 或 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 秒 : 7-1
a { 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 * HTML: # 修改 CSS 連結 <link rel="stylesheet" href="css/oscar7-1.css"> # 另加一項 CSS 連結 <link rel="stylesheet" href="css/oscareffect7-1.css"> # 將 #content 裡的電影名稱加上連結 <p> 像 <b><a href="http://www.imdb.com/title/tt0360717/"> 金剛 </a></b> <b><a href="http://www.imdb.com/title/tt0203009/"> 紅磨坊 </a></b> <b><a href="http://www.imdb.com/title/tt0408306/"> 慕尼黑 </a></b> 等電影都得獎, 但真正的電影英雄卻都沒得獎, 一點也沒有好萊塢精神, 不是嗎?</p> * CSS: # 建立新檔案 :oscareffect7-1.css, 儲存至 css 目錄中 # 將 #content 裡的連結加上滑鼠縈繞效果 : 放大字體 顏色變黑 去底線 陰影 div#content a:hover { font-size: 200%; color: black; text-decoration: none; text-shadow: 1px 1px 0 lightgray; # 以上為立即呈現開或關的效果, 再加上過渡效果 div#content a:hover { transition: all 1s ease 0s; # 回應式設計裡加上過渡效果 ( 預設 ease 無延遲 ) /* Responsive design */ @media screen and (max-width: 1000px) { * { transition: all 2s; @media screen and (max-width: 800px) { * { transition: all 2s; @media screen and (max-width: 600px) { * { transition: all 2s; - CSS3 的各種技巧 :http://css-tricks.com/ (2) CSS3 的二維轉換 - 過渡 (Transition) 定義如何由某個狀態轉到另一個狀態 - 轉換 (Transformation) 則定義狀態的內涵 7-2
- 二維轉換 (2D transformation), 有下列轉換方式 : * translate: 平移, 例如向右平移 40px 距離 :transform: translate(40px, 0); * scale: 縮放, 例如縮小一半 :transform: scale(0.5); * rotate: 旋轉, 例如旋轉 90 度 :transform: rotate(90deg); * skew: 依 x, y 軸歪斜, 例如 x 軸與 y 軸分別歪斜 10 2 度 :transform: skew(10deg, 2deg); * matrix: 可設定轉換陣列, 將各種轉換一次完成, 例如 :transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); * transform-origin: 設定轉換的中心點 ( 預設為元素的中心點 ), 例如 :transform-origin: 20% 20%; * 例如, 各種二維轉換 : a { display: inline-block; a:hover { /* Try each of the following one by one: */ transform: scale(1.7); transform: translate(40px, 0); transform: rotate(90deg); transform: skew(10deg, 2deg); transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989); # 註 : 設定 display: block; 會有無法預期的錯誤, 因為區塊寬度佔滿整個包含元素, 轉換變得規模很大 - 練習 : 修改 oscar7-1.html 及 oscar7-1.css 及 oscareffect7-1.css, 並分別另存新檔為 oscar7-2.html oscar7-2.css 及 oscareffect7-2.css * HTML: 修改 CSS 連結 <link rel="stylesheet" href="css/oscar7-2.css"> 連及 <link rel="stylesheet" href="css/oscareffect7-2.css"> * 修改 oscar7-2.css: 將 nav 裡的 a 連結改為行內區塊顯示 ( 如此才能做文字以外的效果 ) nav ul li a { display: inline-block; * 修改 oscareffect.css: 當使用者將滑鼠移至連結時, 將字體放大 2 倍 加陰影過渡 1 秒 nav ul li a:hover { text-shadow: 2px 2px 2px black; transition: all 1s ease 0s; transform: scale(2); - 三維轉換 (3D transformation), 有下列轉換方式 : * translatex(x) translatey(y) translatez(z) translate3d(x, y, z): 相對 X Y 或 Z 軸平移 * scalex(x) scaley(y) scalez(z) scale3d(x, y, z): 相對 X Y 或 Z 軸縮放 7-3
* rotatex(angle) rotatey(angle) rotatez(angle) rotate3d(x, y, z, angle): 相對 X Y 或 Z 軸旋轉 * perspective(n): 透視 (Perspective) * matrix3d(n, n,, n): 設定轉換陣列, 將各種轉換一次完成 - 練習 : 修改 oscar7-2.html 及 oscar7-2.css 及 oscareffect7-2.css, 並分別另存新檔為 oscar7-3.html oscar7-3.css 及 oscareffect7-3.css * HTML: 製作一個有關電影是否熱賣的測驗 : 利用電影海報當考題, 滑鼠移至時, 海報翻轉顯示答案 # 修改 CSS 連結 :<link rel="stylesheet" href="css/oscar7-3.css"> 及 <link rel="stylesheet" href="css/oscareffect7-3.css"> # 刪除 #content 元素內的所有資料 # #content 裡加入 3 個 section 元素來置放電影海報與答案 - section 均設為 class="quiz" - 每個 section 內含一個 <div class="film"> - 每個 div.film 內含 <div class="face"> 與 <div class="face back">, 前者置放海報影像, 後者置放答案, 並將影像設定 class="quizimg" <div id="content"> <h1> 小考 : 熱賣或慘淡?</h1> <h2> 不要聽那些影評人的話, 你認為 七寶奇謀 慕尼黑 和 金剛, 哪一部電影的票房是熱賣或慘淡?</h2> <section class="quiz"> <div class="film"> <div class="face"><img class="quizimg" src="img/goonies.png" alt=" 七寶奇謀 "></div> <div class="face back"><h2> 熱賣!</h2></div> </div> </section> <section class="quiz"> <div class="film"> <div class="face"><img class="quizimg" src="img/munich.png" alt=" 慕尼黑 "></div> <div class="face back"><h2> 慘淡!</h2></div> </div> </section> <section class="quiz"> <div class="film"> <div class="face"><img class="quizimg" src="img/kingkong.jpg" alt=" 金剛 "></div> <div class="face back"><h2> 慘淡!</h2></div> </div> </section> </div> <!-- end content --> * 修改 oscar7-3.css: # 刪除原先 #content 裡的各個元素設定, 僅留以下設定 /* Content */ div#content { float: right; width: 75%; /* 720/960 */ margin-top: 5.2083333%; /* 50/960 */ 7-4
padding: 2.0833333%; /* 20/960 */ # 設定 : - section.quiz 的寬度為 28% ( 因為有 3 張影像 ), 高度固定 300px, 並設定 display: inline-block 以並排影像 - 設定影像尺寸 100%( 填滿包含區塊 ) 及 <h2> 字型 div#content { section.quiz { width: 28%; height: 300px; display: inline-block; margin-right: 2%; section.quiz img.quizimg { width: 100%; height: 100%; section.quiz h2 { font-size: 3em; text-align: center; color: red; * 修改 oscareffect7-3.css: # 設定 div.film 的轉換及過渡 1 秒 div.film { height: 100%; transform-style: preserve-3d; transition: 1s; # 滑鼠移至海報時,div.film 對 Y 軸旋轉 180 度 section.quiz:hover div.film { transform: rotatey(180deg); # 設定隱藏海報的背面, 並設絕對位置使正反面均在同一位置 div.face { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; # 設定海報翻轉後顯示的內容 : 長寬設定為和影像相同, 一開始就旋轉 180 度 ( 因此初始頁面會顯示海報 ) div.back { transform: rotatey(180deg); background: #3b3b3b; padding: 15%; 7-5
- CSS3 的轉換尚在發展中 :http://dev.w3.org/csswg/css-transforms/ (3) CSS3 的動畫 - 動畫 (Animation) * 設定元素隨著時間產生變化 - 練習 : 修改 oscar7-3.html 及 oscar7-3.css 及 oscareffect7-3.css, 並分別另存新檔為 oscar7-4.html oscar7-4.css 及 oscareffect7-4.css * HTML: 修改 CSS 連結 <link rel=stylesheet href=css/oscar7-4.css>,<link rel=stylesheet href=css/oscareffect7-4.css> 結 * 修改 oscareffect7-4.css: # 將 熱賣 或 慘淡 之靜態文字加上動畫 - 宣告一個名為 answer 的 keyframes 動畫 @keyframes answer { 0% { text-shadow: 0 0 4px #ffffff; 50% { text-shadow: 0 0 60px #ffffff; 100% { text-shadow: 0 0 4px #ffffff; * 0% ( 一開始 ): 文字陰影為 4px 白色 * 50% ( 時間進行到一半 ): 文字陰影為 60px * 100% ( 最後 ): 文字陰影為 4px - 加入動畫 : 變化時間 2 秒, 一直持續, 淡入 section.quiz h2 { animation: answer 2s infinite ease-in; # 設定左方四張影像海報在進入網頁時擺動 - 宣告一個名為 swing 的動畫 : 旋轉 3 度 7 度 10 度 7 度 3 度 @keyframes swing { 0% { transform: rotate(3deg); 20% { transform: rotate(7deg); 60% { transform: rotate(10deg); 80% { transform: rotate(7deg); 100% { transform: rotate(3deg); - 加入動畫 ( 變化時間 0.1 秒, 持續 10 次 ): aside img.poster { transform: rotate(3deg); animation: swing 0.1s 10; * 結果 : - CSS3 animation 範例 : http://webdesignerwall.com/trends/47-amazing-css3- animation-demos 7-6