CSS transition 可以做簡單的動畫
transition： 屬性 轉換時間 延遲執行的時間 速度；
先做一個超連結，做一個簡單的按鈕的各種動畫效果
/* transition: 全部屬性 1秒鐘 延遲無 速度ease預設 */
1
2
3
4
5
6
7
8
| .btn{
transition: all .3s 0s ease ;
}
.btn:hover{
background-color: #f00;
color: #ff0;
}
|
/* transition: 只有背景顏色須要做動畫 3秒鐘 延遲無 速度ease預設 */
1
2
3
4
5
6
7
| .btn{
transition: background-color 3s 0s ease ;
}
.btn:hover{
background-color: #f00;
color: #ff0;
}
|
/* transition: 還有一個分組的概念 , 可以用逗號區格，先後執行順序 /
/ 下列設定會在一秒鐘之後執行 backckground-color的動畫，但是會在一開始先執行padding 的動畫 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金魚都能懂的網頁設計入門-第十七天 - 網頁動畫</title>
<style type="text/css">
.btn{
display: inline-block;
padding: 10px 20px;
background-color: #000;
text-decoration: none;
color: #fff;
transition:
padding 1s 0s ease,
background-color 1s 1s ease ;
}
.btn:hover{
background-color: #f00;
color: #ff0;
padding: 10px 30px;
}
</style>
</head>
<body>
<a href="#" class="btn">送出</a>
</body>
</html>
|
利用之前的稀飯版來做改變
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.about .item h3{
color: #000;
transition: .5s;
}
.about .item p{
color: #000;
transition: .5s;
}
.about .item h3:hover{
color: #fa0;
}
.about .item p:hover{
color: #fa0;
}
|
文獻連結:
金魚都能懂的網頁設計入門-第十七天 - 網頁動畫
https://www.youtube.com/watch?v=kR6JpIGJDBQ&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=17 by CSScoke Amos
完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos