一、CSS3 過渡
(一)、CSS3過渡簡介
CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。
實現過渡效果的兩個要件:
- 規定把效果添加到哪個 CSS 屬性上
- 規定效果的時長
定義動畫的規則
過渡transition (作用) 將元素的某個屬性從“一個值”在指定的時間內過渡到“另一個值”
(二)、transition屬性
語法 : {transition: 屬性名 持續時間 過渡方法 }
transition-timing-function 屬性取值
示例:
利用transition設置過渡的實例
<!doctype html> <html> <head> <title></title> <style> div { width:100px; height:100px; background:blue;
transition:width 2s; } div:hover { width:600px; height:600px; text-align: center; line-height:100px; background:url(1.jpg); background-position:top; background-repeat: no-repeat; } </style> </head> <body> <div>kaka</div> </body> </html>
從一個正方體
過渡到一個背景圖片