aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorclarkzjw <[email protected]>2022-12-09 17:16:51 -0800
committerclarkzjw <[email protected]>2022-12-09 17:16:51 -0800
commit605513219ae93dff0e0876e8f90f3cf1bf748cf9 (patch)
tree06cb90ff7fd01558159ee556cca36380370181bf /deprecated/2022/css
parent4eb313986873dbc036e9dddbba79ffd4ee578aaf (diff)
downloadjinwei.me-deprecated.tar.gz
deprecated: add 2022 github gist versiondeprecated
Diffstat (limited to 'deprecated/2022/css')
-rw-r--r--deprecated/2022/css/main.css176
1 files changed, 176 insertions, 0 deletions
diff --git a/deprecated/2022/css/main.css b/deprecated/2022/css/main.css
new file mode 100644
index 0000000..4733137
--- /dev/null
+++ b/deprecated/2022/css/main.css
@@ -0,0 +1,176 @@
1@-webkit-keyframes fade {
2 0% {
3 opacity: 0;
4 margin-top: 10px;
5 }
6 100% {
7 opacity: 1;
8 margin-top: 0px;
9 }
10}
11
12* {
13 margin: 0px;
14 padding: 0px;
15}
16
17body {
18 font-family: Penumbra, HiraginoSansGB-W3, sans-serif;
19}
20
21h1 {
22 font-size: 22px;
23 line-height: 40px;
24 -webkit-transition: padding 100ms ease;
25}
26
27p {
28 font-size: 20px;
29 line-height: 40px;
30}
31
32img {
33 width: 80px;
34 height: 80px;
35 padding: 10px;
36 -webkit-transition: margin 1000ms ease;
37}
38
39span#loveu {
40 font-size: 17px;
41 line-height: 40px;
42 font: "Microsoft Ya Hei";
43}
44
45div#card {
46 position: absolute;
47 width: 600px;
48 height: 400px;
49 top: 50%;
50 left: 50%;
51 margin-top: -200px;
52 margin-left: -300px;
53 box-shadow: 0px 5px 20px -5px black;
54 background: black;
55 font: "Microsoft Yi Baiti", Roboto, "华文行楷";
56}
57
58div.block {
59 position: relative;
60 width: 200px;
61 height: 200px;
62 float: left;
63 box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.2);
64 text-align: center;
65 color: white;
66 overflow: hidden;
67 -webkit-transition: opacity 145s ease;
68}
69
70div.block:hover > .divin img {
71 margin-top: -20px;
72}
73
74div.block:hover > .divin h1 {
75 padding-top: 20px;
76}
77
78div.block:hover > .divin {
79 margin-top: -100px;
80}
81
82div.block:hover > .time5 {
83 margin-top: -110px;
84}
85
86div.block:hover > .inbox {
87 -webkit-animation: fade 500ms ease 200ms both;
88}
89
90div.divin {
91 width: 100px;
92 height: 140px;
93 padding: 30px 50px;
94 -webkit-transition: margin 300ms ease;
95}
96
97div.inbox {
98 width: 150px;
99 padding: 0px 25px;
100}
101
102div.time {
103 width: 175px;
104 margin: 0px auto;
105 padding: 0px;
106 height: 100px;
107 padding: 10px 12.5px 0px;
108 background: rgba(0, 0, 0, 0.1);
109 box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.1);
110}
111
112div.time li.list {
113 list-style: none;
114 position: relative;
115 float: left;
116 width: 25px;
117 height: 50px;
118 margin: 0px 0px 10px 0px;
119 font-size: 12px;
120 -webkit-transition: 200ms ease;
121}
122
123div.time li.list:hover {
124 color: yellow;
125 -webkit-transform: scale(1.1);
126}
127
128div#b1 {
129 background-color: #2CC0E2;
130}
131
132div#b2 {
133 background-color: #59D999;
134}
135
136div#b3 {
137 background-color: #7658F9;
138}
139
140div#b4 {
141 background-color: #E9C24E;
142}
143
144div#b5 {
145 background-color: #E55679;
146}
147
148div#b6 {
149 background-color: grey;
150}
151
152span.last {
153 position: absolute;
154 font-size: 72px;
155 line-height: 200px;
156 width: 200px;
157 height: 200px;
158 left: 0px;
159 top: 0px;
160 -webkit-transition: opacity 200ms ease;
161}
162
163span#u {}
164
165span#real {
166 position: absolute;
167 opacity: 0;
168}
169
170div#b6:hover #u {
171 opacity: 0;
172}
173
174div#b6:hover #real {
175 opacity: 1;
176}
Powered by cgit v1.2.3 (git 2.41.0)