認識CSS3特性之過渡

時間 2019-11-19

標籤認識 css3 css 特性過渡欄目 CSS 简体版

原文原文鏈接

前端之HTML5，CSS3（三）

　　過渡

　　經過 CSS3，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果的特性稱爲過渡。簡單來講，就是某一元素從一種狀態平滑的轉變爲另外一種狀態的過程。css

　　過渡(transition)的屬性

基本語法：選擇器 {transition:過渡屬性花費時間運動曲線開始時間延時}，存在多組屬性變化能夠使用逗號隔開，多組屬性變化能夠看到表現爲慢動畫效果。html

屬性	描述
transition	屬性連寫，能夠設置下面四個過渡屬性
transition-property	須要過渡的屬性，即要變化的屬性
transition-duration	過渡時間，即變化須要花費多少時間，默認爲0
transition-timing-function	過渡曲線，即變化效果的時間曲線，默認是ease
transition-delay	過渡開始延時，即變化的開始時間，默認爲0

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>過渡-測試</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 200px;
10             background-color: skyblue;
11             transition: width 2s ease 0s, height 3s linear 2s;
12         }
13         div:hover {
14             width: 400px;
15             height: 600px;
16         }
17     </style>
18 </head>
19 <body>
20     <div></div>
21 </body>
22 </html>

　　上述代碼效果自行測試，代碼中一個天藍色200*200像素的盒子，鼠標通過會變化成一個400*600的盒子，大小發生變化，是由一種裝填向另外一種狀態轉變的過程，使用過渡(transition)。設置transition:width 2s ease 0s ,height 3s linear 2s，其意思是過渡效果設置爲鼠標通過200*200的盒子時，設置transition-delay爲0s的屬性，即寬度開始變化，按照transition-timing-function屬性值爲ease(慢-快-慢)時間速度曲線，在進行2s時完成變化爲寬度400像素的盒子；與此同時，2s時，高度開始按照linear(勻速)的時間速度曲線，花費3s變化成高度爲600像素的盒子，至此結束。前端

　　transition-timing-funcing表示變化速度的意思，屬性值有：linear(勻速)，ease(慢速-快速-慢速)，ease-in(慢速-快速)，ease-out(快速-慢速)...詳細瞭解請看W3Cschool.測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。