2D過渡模塊的其他屬性
阿新 • • 發佈：2018-06-16
nth delay out -c 布局 aaaaa tran 特點 TP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset
/* 添加需要過渡的屬性 */ transition-property: margin-left; /* 添加時間 */ transition-duration: 5s; } /* 鼠標移入 ul 添加統一效果 */ ul:hover li{ margin-left: 800px; }
/* 添加各自的樣式效果 */ ul li:nth-child(1){ transition-timing-function: linear; } ul li:nth-child(2){ transition-timing-function:ease; } ul li:nth-child(3){ transition-timing-function: ease-in; } ul li:nth-child(4){ transition-timing-function: ease-out; } ul li:nth-child(5){ transition-timing-function: ease-in-out; } </style> </head> <body> <ul> <li>liner</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } /*布局基本樣式 */ ul{ width: 1000px; height: 600px; background-color: beige; margin: 100px auto; list-style: none; } ul li{ width: 150px; height: 100px; background-color: pink; margin-top: 10px; line-height: 100px; text-align: center;
/* 添加需要過渡的屬性 */ transition-property: margin-left; /* 添加時間 */ transition-duration: 5s; } /* 鼠標移入 ul 添加統一效果 */ ul:hover li{ margin-left: 800px; }
/* 添加各自的樣式效果 */ ul li:nth-child(1){ transition-timing-function: linear; } ul li:nth-child(2){ transition-timing-function:ease; } ul li:nth-child(3){ transition-timing-function: ease-in; } ul li:nth-child(4){ transition-timing-function: ease-out; } ul li:nth-child(5){ transition-timing-function: ease-in-out; } </style> </head> <body> <ul> <li>liner</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html>
官網上關於過渡屬性的值：
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
transition-timing-function 的值 有一下特點：
| 值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 |
| ease | 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 |
/* 添加需要過渡的屬性 */ transition-property: margin-left; /* 添加時間 */ transition-duration: 5s; } /* 鼠標移入 ul 添加統一效果 */ ul:hover li{ margin-left: 800px; }
/* 添加各自的樣式效果 */ ul li:nth-child(1){ transition-timing-function: linear; } ul li:nth-child(2){ transition-timing-function:ease; } ul li:nth-child(3){ transition-timing-function: ease-in; } ul li:nth-child(4){ transition-timing-function: ease-out; } ul li:nth-child(5){ transition-timing-function: ease-in-out; } </style> </head> <body> <ul> <li>liner</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } /*布局基本樣式 */ ul{ width: 1000px; height: 600px; background-color: beige; margin: 100px auto; list-style: none; } ul li{ width: 150px; height: 100px; background-color: pink; margin-top: 10px; line-height: 100px; text-align: center;
/* 添加需要過渡的屬性 */ transition-property: margin-left; /* 添加時間 */ transition-duration: 5s; } /* 鼠標移入 ul 添加統一效果 */ ul:hover li{ margin-left: 800px; }
/* 添加各自的樣式效果 */ ul li:nth-child(1){ transition-timing-function: linear; } ul li:nth-child(2){ transition-timing-function:ease; } ul li:nth-child(3){ transition-timing-function: ease-in; } ul li:nth-child(4){ transition-timing-function: ease-out; } ul li:nth-child(5){ transition-timing-function: ease-in-out; } </style> </head> <body> <ul> <li>liner</li> <li>ease</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> </body> </html>
2D過渡模塊的其他屬性