CSS3 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; } |
測試練習 參考結果