響應式網頁前端設計【第一階段】加強熟識HTML&CSS
轉場過程呈現的動畫
有關轉場過程的新屬性
| 版本 | 屬性 | 說 明 |
|---|---|---|
| 3 | transition | 轉場過程以指定時間動畫呈現。 參考【英文版】 【英文版】 【簡中版】 【簡中版】 |
滑鼠滑入以下物件, 會以動畫呈現轉場過程
| 範例 | HTML 及 CSS 設定 |
|---|---|
<button>按鈕</button>
button { font-size: 20px; padding: 10px 20px; margin: 10px; border-radius: 5px;
font-weight: bold; cursor: pointer; transition: all 2s; }
button:hover { background-color: hotpink; }
|
|
 |
<div><img src="../images/flower/f1.jpg"></div>
div { width: 200px; height: 200px; overflow: hidden; }
div img { width: 100%; height: auto; transition: all 2s; }
div img:hover { transform: scale(5); opacity: 0.2; }
|
測試練習 參考結果