aboutsummaryrefslogtreecommitdiff
path: root/deprecated/Blocks
diff options
context:
space:
mode:
authorJinwei Zhao <[email protected]>2016-04-04 14:00:39 +0800
committerJinwei Zhao <[email protected]>2017-01-13 15:07:45 +0800
commite002d09d2b6b2317fec6caa8836b20e6709c5da3 (patch)
tree1e1623524986fc63abcab7b10912dffe55dc1da9 /deprecated/Blocks
parentdbcebe1def5c355120c61b575390d1d9ac355f67 (diff)
downloadjinwei.me-e002d09d2b6b2317fec6caa8836b20e6709c5da3.tar.gz
jinwei.me
Diffstat (limited to 'deprecated/Blocks')
-rw-r--r--deprecated/Blocks/css/main.css176
-rw-r--r--deprecated/Blocks/img/background.jpgbin0 -> 475073 bytes
-rw-r--r--deprecated/Blocks/img/future.pngbin0 -> 3888 bytes
-rw-r--r--deprecated/Blocks/img/life.pngbin0 -> 3999 bytes
-rw-r--r--deprecated/Blocks/img/love.pngbin0 -> 3006 bytes
-rw-r--r--deprecated/Blocks/img/music.mp3bin0 -> 3225530 bytes
-rw-r--r--deprecated/Blocks/img/python.pngbin0 -> 4159 bytes
-rw-r--r--deprecated/Blocks/img/time.pngbin0 -> 24881 bytes
-rw-r--r--deprecated/Blocks/img/train.pngbin0 -> 13711 bytes
-rw-r--r--deprecated/Blocks/img/world.pngbin0 -> 7487 bytes
-rw-r--r--deprecated/Blocks/index.html112
11 files changed, 288 insertions, 0 deletions
diff --git a/deprecated/Blocks/css/main.css b/deprecated/Blocks/css/main.css
new file mode 100644
index 0000000..4733137
--- /dev/null
+++ b/deprecated/Blocks/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}
diff --git a/deprecated/Blocks/img/background.jpg b/deprecated/Blocks/img/background.jpg
new file mode 100644
index 0000000..ea44056
--- /dev/null
+++ b/deprecated/Blocks/img/background.jpg
Binary files differ
diff --git a/deprecated/Blocks/img/future.png b/deprecated/Blocks/img/future.png
new file mode 100644
index 0000000..7722341
--- /dev/null
+++ b/deprecated/Blocks/img/future.png
Binary files differ
diff --git a/deprecated/Blocks/img/life.png b/deprecated/Blocks/img/life.png
new file mode 100644
index 0000000..ebfe8d2
--- /dev/null
+++ b/deprecated/Blocks/img/life.png
Binary files differ
diff --git a/deprecated/Blocks/img/love.png b/deprecated/Blocks/img/love.png
new file mode 100644
index 0000000..7e914b8
--- /dev/null
+++ b/deprecated/Blocks/img/love.png
Binary files differ
diff --git a/deprecated/Blocks/img/music.mp3 b/deprecated/Blocks/img/music.mp3
new file mode 100644
index 0000000..365839d
--- /dev/null
+++ b/deprecated/Blocks/img/music.mp3
Binary files differ
diff --git a/deprecated/Blocks/img/python.png b/deprecated/Blocks/img/python.png
new file mode 100644
index 0000000..1ff51c3
--- /dev/null
+++ b/deprecated/Blocks/img/python.png
Binary files differ
diff --git a/deprecated/Blocks/img/time.png b/deprecated/Blocks/img/time.png
new file mode 100644
index 0000000..b4196cd
--- /dev/null
+++ b/deprecated/Blocks/img/time.png
Binary files differ
diff --git a/deprecated/Blocks/img/train.png b/deprecated/Blocks/img/train.png
new file mode 100644
index 0000000..9a668b9
--- /dev/null
+++ b/deprecated/Blocks/img/train.png
Binary files differ
diff --git a/deprecated/Blocks/img/world.png b/deprecated/Blocks/img/world.png
new file mode 100644
index 0000000..f1e1d5d
--- /dev/null
+++ b/deprecated/Blocks/img/world.png
Binary files differ
diff --git a/deprecated/Blocks/index.html b/deprecated/Blocks/index.html
new file mode 100644
index 0000000..eea48b0
--- /dev/null
+++ b/deprecated/Blocks/index.html
@@ -0,0 +1,112 @@
1<html>
2<head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>For U</title>
5 <meta charset="UTF-8">
6 <link rel="stylesheet" href="css/main.css">
7 <style type="text/css">
8 body {
9 background-repeat: repeat;
10 background-color: #CEE3F6;
11 background-image: url(img/background.jpg);
12 }
13 </style>
14</head>
15
16<body>
17 <div id="card">
18 <div class="block" id="b1">
19 <div class="divin love">
20 <img src="./img/love.png">
21 <h1>爱情</h1>
22 </div>
23 <div class="inbox">
24 <p>关于你的每件事</p>
25 </div>
26 </div>
27 <div class="block" id="b2">
28 <div class="divin">
29 <img src="./img/life.png">
30 <h1>生命</h1>
31 </div>
32 <div class="inbox">
33 <p>一直在前行</p>
34 </div>
35 </div>
36 <div class="block" id="b3">
37 <div class="divin">
38 <img src="./img/train.png">
39 <h1>未来</h1>
40 </div>
41 <div class="inbox">
42 <p>说好的约定</p>
43 </div>
44 </div>
45 <div class="block" id="b4">
46 <div class="divin">
47 <img src="./img/world.png">
48 <h1>世界</h1>
49 </div>
50 <div class="inbox">
51 <p>将会慢慢老去</p>
52 <p>
53 </p>
54 </div>
55 </div>
56 <div class="block" id="b5">
57 <div class="divin time5">
58 <img src="./img/time.png">
59 <h1>时间</h1>
60 </div>
61 <div class="inbox time">
62 <li class="list">
63 星<br>
64 期<br>
65 一
66 </li>
67 <li class="list">
68 星<br>
69 期<br>
70 二
71 </li>
72 <li class="list">
73 星<br>
74 期<br>
75 三
76 </li>
77 <li class="list">
78 星<br>
79 期<br>
80 四
81 </li>
82 <li class="list">
83 星<br>
84 期<br>
85 五
86 </li>
87 <li class="list">
88 星<br>
89 期<br>
90 六
91 </li>
92 <li class="list">
93 星<br>
94 期<br>
95 日
96 </li>
97 <span id="loveu">每一句晚安</span>
98 </div>
99 </div>
100 <div class="block" id="b6">
101 <div class="divin">
102 <img src="./img/python.png">
103 <h1>你</h1>
104 </div>
105 <div class="inbox">
106 <p>我的世界</p>
107 </div>
108 </div>
109 </div>
110 <audio src="img/music.mp3" preload="auto" autoplay="true" loop="true"></audio>
111</body>
112</html>
Powered by cgit v1.2.3 (git 2.41.0)