-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
49 lines (47 loc) · 1.2 KB
/
index.htm
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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oxygen">
<style>
body {
overflow: hidden;
}
#titlemain {
top: 50%;
position: absolute;
font-family: "Oxygen";
transform: translateY(1000%);
width: 99%;
display: flex;
justify-content: center;
align-items: center
perspective: 1000px;
perspective-origin: 50% 50%;
-webkit-transform: translateY(1000%);
}
.slide-in {
animation: slide-in 2.6s forwards;
-webkit-animation: slide-in 2.6s forwards;
}
@keyframes slide-in {
100% { transform: translateY(-50%); }
}
@-webkit-keyframes slide-in {
100% { -webkit-transform: translateY(-50%); }
}
</style>
</head>
<body>
<div id="titlemain" class="slide-in">
<h2 id="kcxd">Couldn't get IP</h2>
</div>
<script>
fetch('https://api.my-ip.io/ip.json').then(response => response.json()).then(data => document.getElementById("kcxd").innerHTML = data.ip);
</script>
<script>
var $slider = document.getElementById('titlemain');
$slider.classList.contains('slide-in');
</script>
</body>
</html>