-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
100 lines (84 loc) · 1.63 KB
/
style.css
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
* {
margin: 0;
padding: 0;
}
body {
background-color: rgba(243, 222, 187, 0.895);
}
/*gird網格 讓物件置中*/
main {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
/*立體按鈕:下壓感 陰影屬性(x軸 y軸 擴散性)*/
#modalOpen {
/* display: none; */
background-color: #eb6100;
color: rgb(231, 228, 228);
border: none;
padding: 20px 30px;
border-bottom: 7px solid #9e4a0e;
box-shadow: 0px 3px 4px black;
cursor: pointer;
font-size: 25px;
border-radius: 25px;
}
/*緩慢下壓感*/
#modalOpen:hover {
margin-top: 5px;
border-bottom: 1px solid #9e4a0e;
transition: all 0.2s;
}
/*對話框*/
#modal {
display: none;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgb(76, 75, 75);
z-index: 10;
}
/*對話內容*/
.modal-content {
background-color: rgb(231, 228, 228);
margin: 15% auto;
width: 500px;
box-shadow: 0 2px 7px black;
animation-name: popup;
animation-duration: 1.1s;
border-radius: 10px 10px 10px 10px;
}
.modal-header {
border-radius: 10px 10px 0 0;
}
/*彈出效果 從下而上0%-150% Y軸往下為正、往上為負 */
@keyframes popup {
from {
transform: translateY(150%);
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-header {
background-color: #eb6100;
padding: 3px 15px;
display: flex;
justify-content: space-between;
}
.modal-header h1 {
font-size: 1.3rem;
margin: 10px 0;
}
.modalClose {
font-size: 1.3rem;
cursor: pointer;
}
.modal-body {
padding: 15px 20px;
}