aboutsummaryrefslogtreecommitdiff
path: root/Blocks/demo/cartedeParis1.html
diff options
context:
space:
mode:
authorJinweiClarkChao <[email protected]>2014-02-20 12:50:15 +0800
committerJinweiClarkChao <[email protected]>2014-02-20 12:52:51 +0800
commit31fb10f393fbfd4d7adf528ec70624d2b8d247a8 (patch)
tree1009bb2a4f5fe89b8bc822b68104018ea8df5261 /Blocks/demo/cartedeParis1.html
parentbe404e3e01ca839e730c884309c25abef10863c9 (diff)
downloadjinwei.me-31fb10f393fbfd4d7adf528ec70624d2b8d247a8.tar.gz
Six Blocks Version
Diffstat (limited to 'Blocks/demo/cartedeParis1.html')
-rw-r--r--Blocks/demo/cartedeParis1.html159
1 files changed, 159 insertions, 0 deletions
diff --git a/Blocks/demo/cartedeParis1.html b/Blocks/demo/cartedeParis1.html
new file mode 100644
index 0000000..a7268ea
--- /dev/null
+++ b/Blocks/demo/cartedeParis1.html
@@ -0,0 +1,159 @@
1<!DOCTYPE html>
2<html >
3<head>
4<title>Paris</title>
5 <meta charset="utf-8" />
6<style>
7body, div, h1,h2, form, fieldset, input, textarea, footer,p {
8 margin: 0; padding: 0; border: 0; outline: none;
9}
10@font-face {
11 font-family: 'DeibiRegular';
12 src: url('deibi-webfont.eot');
13 src: url('deibi-webfont.eot?#iefix') format('embedded-opentype'),
14 url('deibi-webfont.woff') format('woff'),
15 url('deibi-webfont.ttf') format('truetype'),
16 url('deibi-webfont.svg#DeibiRegular') format('svg');
17 font-weight: normal;
18 font-style: normal;}
19
20body, html {background: #f2f2f2; font-family:'DeibiRegular', Helvetica, Arial, sans-serif;}
21
22#wrap {
23 background: url('images/clouds1000.png') repeat-x, url('images/clouds1200_1.png') repeat-x 0 0, url('images/Paris_sky.jpg') 0 0;
24 width: 600px;
25 height: 680px;
26 overflow: hidden;
27 display: block;
28 position: relative;
29 margin: 0px auto;
30 border: 0px solid #fff;
31 -webkit-box-shadow: 0 0 20px #bababa;
32 -moz-box-shadow: 0 0 20px #bababa;
33 box-shadow: 0 0 20px #bababa;
34 -webkit-border-radius: 10px;
35 -moz-border-radius: 10px;
36 border-radius: 10px;
37 -webkit-animation: wind 30s linear infinite;
38 -moz-animation: wind 80s linear infinite;
39 }
40
41 #eiffel {position:absolute; background: url('images/Paris_eiffel.png') no-repeat ; width:240px; height:462px; right:10px; top: 180px; }
42
43 #sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat; width:240px; height:462px; opacity:0;
44 -webkit-animation: sparkling .4s .2s infinite;-moz-animation: sparkling .4s .2s infinite; }
45
46
47 #sparkling2 { position:absolute;background: url('images/sparkling2.png') no-repeat; width:240px; height:462px; opacity:0;
48 -webkit-animation: sparkling .4s infinite; -moz-animation: sparkling .4s linear infinite; }
49
50 #eiffel_wrap {position:absolute; width:240px; height:462px; right:10px; top: 180px;opacity:0;
51 -webkit-animation: eiffel_wrap 30s 1s infinite; -moz-animation: eiffel_wrap 30s 1s infinite; }
52
53
54 #roofs {width: 600px; height: 900px; position:relative;
55 background: url('images/clouds1200_2.png') repeat-x left 200px, url('images/Paris_roofs.png') repeat-x left bottom ;
56 -webkit-animation: wind1 70s linear infinite; -moz-animation: wind1 70s linear infinite;}
57
58 #phare {position:absolute; background: url('images/phare.png'); width:130px; height:510px; right:64px; top: 185px; opacity:0;
59 -webkit-transform-origin: center top; -webkit-animation: phare 15s linear infinite;
60 -moz-transform-origin: center top; -moz-animation: phare 15s linear infinite;}
61
62h1 {position:absolute; top: 180px; left:45px; text-shadow: 0 4px 5px #8c8c8C;color: #f2f2f2; font-size:48px;}
63h1 em {font-style:normal; font-size: 60px;}
64footer {position:absolute; bottom: 10px; right: 10px;font-size:14px;color: #838383;}
65
66 @-webkit-keyframes wind {
67 0% {background-position: 0px 200px,0px 350px, left top;}
68 50% {background-position: 500px 40px,600px 450px, left top;}
69 100% {background-position: 1000px 200px,1200px 350px, left top}
70 }
71
72 @-moz-keyframes wind {
73 0% {background-position: 0px 200px,0px 350px, left top;}
74 50% {background-position: 500px 40px,600px 450px, left top;}
75 100% {background-position: 1000px 200px,1200px 350px, left top}
76 }
77
78 @-webkit-keyframes wind1 {
79 0% {background-position: 100px 250px, left bottom;}
80 50% {background-position: 650px 150px, left bottom;}
81 100% {background-position: 1300px 250px, left bottom}
82 }
83
84 @-moz-keyframes wind1 {
85 0% {background-position: 100px 250px, left bottom;}
86 50% {background-position: 650px 150px, left bottom;}
87 100% {background-position: 1300px 250px, left bottom}
88 }
89
90 @-webkit-keyframes sparkling {
91 0% {opacity:0;}
92 50%{opacity:1;}
93 100% {opacity:0;}
94 }
95
96 @-moz-keyframes sparkling {
97 0% {opacity:0;}
98 50%{opacity:1;}
99 100% {opacity:0;}
100 }
101
102 @-webkit-keyframes eiffel_wrap {
103 0% {opacity:1;-webkit-animation-timing-function: steps(1);}
104 40%{opacity:0;}
105 100% {opacity:0;}
106 }
107
108
109
110 @-moz-keyframes eiffel_wrap {
111 0% {opacity:1;-moz-animation-timing-function: steps(1);}
112 40%{opacity:0;}
113 100% {opacity:0;}
114 }
115
116 @-webkit-keyframes phare {
117 0% { -webkit-transform:rotate(0deg); opacity:0 }
118 40% { -webkit-transform:rotate(144deg); opacity:.2 }
119 50% { -webkit-transform:rotate(180deg); opacity:1 }
120 60% { -webkit-transform:rotate(216deg); opacity:.2 }
121 100% { -webkit-transform:rotate(360deg); opacity:0; }
122 }
123
124 @-moz-keyframes phare {
125 0% { -moz-transform:rotate(0deg); opacity:0 }
126 40% { -moz-transform:rotate(144deg); opacity:.2 }
127 50% { -moz-transform:rotate(180deg); opacity:1 }
128 60% { -moz-transform:rotate(216deg); opacity:.2 }
129 100% { -moz-transform:rotate(360deg); opacity:0; }
130 }
131
132
133body,td,th {
134 font-family: DeibiRegular, Helvetica, Arial, sans-serif;
135}
136</style>
137</head>
138
139<body>
140 <div id="wrap">
141 <h1>Happy Birthday <em>Tiga !</em></h1>
142 <div id="phare"></div>
143 <div id="eiffel"></div>
144 <div id="eiffel_wrap">
145 <div id="sparkling1"></div>
146 <div id="sparkling2"></div>
147 </div>
148 <div id="roofs"></div>
149 <footer>by Jinwei, Paris 2013</footer>
150</div>
151
152<!-- jinwei.me Baidu tongji analytics -->
153<script type="text/javascript">
154var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
155document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F91918ac6d6854623883a2b546ebc00ac' type='text/javascript'%3E%3C/script%3E"));
156</script>
157
158</body>
159</html> \ No newline at end of file
Powered by cgit v1.2.3 (git 2.41.0)