css3 transition 簡易動畫
阿新 • • 發佈：2018-11-12
今天分享下用css3 的transition屬性做的簡易小demo,雖然簡單，但用在一些官網類的專案中還是很實用滴哦~~~
transition屬性有：
| 值 | 描述 |
|---|---|
| transition-property | 規定設定過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒。（必須） |
| transition-timing-function | 規定速度效果的速度曲線。 |
| 定義過渡效果何時開始。 |
直接上程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3滑鼠懸停邊框線條動畫按鈕DEMO演示</title> <style> body{background:#F2F2F2} .btn{ margin-top: 20px; position:relative; left:50%; margin-left:-40px; display: inline-block; width:80px; heigth:40px; line-height: 40px; border:none; background:#0f0f0f; text-align: center; color:#fff; opacity: 0.75; } span.line{ display: inline-block; background:red; position: absolute; bottom: 0px; z-index: 100; left: 0; width:0px; height:3px; transition:width 300ms ease-out; -webkit-transition:width 300ms ease-out; -o-transition: width 300ms ease-out; -moz-transition: width 300ms ease-out; } .btn:hover{ opacity: 1; transition:opacity 500ms linear; } .btn:hover span{ width:80px; transition:width 300ms ease-in; -webkit-transition:width 300ms ease-in; -o-transition:width 300ms ease-in; -moz-transition:width 300ms ease-in; } </style> </head> <body> <div class="button_box"> <a class="btn"></span>按鈕<span class="line lineR"></span></a> </div> </body> </html>
上傳不了動圖，只能上程式碼了，直接複製下來看效果吧！