-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
58 lines (58 loc) · 2.49 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Mobile Sensors</title>
<style type="text/css" media="screen">
* {
padding: 0;
margin: 0;
}
body {
padding: 10px;
font: 1em "Microsoft YaHei", Helvetica, Arial, sans-serif;
text-align: center;
}
h3 {
font: 3em "Microsoft YaHei", Helvetica, Arial, sans-serif;
margin-bottom: 20px;
}
h4 {
font: 1em "Microsoft YaHei", Helvetica, Arial, sans-serif;
color: #737373;
margin-bottom: 30px;
}
.js {
color: #f00;
}
a {
font-size: 1.2em;
color: #41b7d8;
line-height: 2em;
margin: 0 0.5em;
}
@media screen and (min-width:800px) {
body {
padding: 50px 10px;
font-size: 2em;
}
a {
font-size: 0.8em;
}
}
#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:fixed;display:block;top:0;right:-5px;width:200px;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(169,169,169,0.8);}}
</style>
</head>
<body>
<span id="forkongithub"><a href="https://github.com/branding-fe/sensor">Fork me on GitHub</a></span>
<h3>sensor.<span class="js">js</span></h3>
<h4>在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。</h4>
<div class="examples">
<a href="/examples/orientation.html">倾斜</a>+
<a href="/examples/shake.html">摇一摇</a>+
<a href="/examples/geolocation.html">定位</a><br />
<a href="/examples/erasableMask.html">擦一擦</a><br />
</div>
</body>
</html>