iyre.github.io/index.html at master · iyre/iyre.github.io · GitHub

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
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Cache-control" content="public">
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
		<title>>_<</title>
		<meta name="description" content="Placeholder">
		<meta name="author" content="Miles">
		<style>
			body {text-align: center;}
			.box {
				background-color: transparent;
				fill:#fff;
				top:0;
				bottom:0;
				left: 0;
				right:0;
				position:absolute;
				width: 300px;
				height: 300px;
				margin: auto;
				-webkit-filter:drop-shadow(0 0 4px rgba(0,0,0,.1));
		                filter:drop-shadow(0 0 4px rgba(0,0,0,.1));
			}
			.dot {
				fill:#fff;
				left: 0;
				right:0;
				position:absolute;
				width: 76px;
				height: 76px;
				margin: auto auto 224px auto;

			    -webkit-animation-name:            rotate;
			    -webkit-animation-duration:        3s;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-timing-function: linear;

			    animation-name:            rotate;
			    animation-duration:        3s;
			    animation-iteration-count: infinite;
			    animation-timing-function: linear;
			}
			@-webkit-keyframes rotate {
				from {-webkit-transform: rotateY(0deg);}
				  to {-webkit-transform: rotateY(360deg);}
			}
			@-moz-keyframes rotate {
				from {-moz-transform: rotateY(0deg);
			    		   transform: rotateY(0deg);}
				  to {-moz-transform: rotateY(360deg);
						   transform: rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				<svg class="dot" viewBox="0 0 32 8">
					<circle cx="16" cy="4" r="16"/>
				</svg>
			</div>
			<div>
				<svg viewBox="0 0 32 32">
					<path d="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8v4H10z"/>
				</svg>
			</div>
		</div>
	</body>
</html>