mestima/memeginx
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Mestima 2022-06-01 00:54:58 +03:00
parent 8144b7d51a
commit a9092ad6a1
3 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>Welcome to <p class="rotating inline">nginx</p>!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/" id="l1">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/" id="l2">nginx.com</a>.</p>
<p id="thxText"><em>Thank you for using nginx.</em></p>
<script src="./runAway.js"></script>
<script>
initRunning(document.getElementById('l1'));
initRunning(document.getElementById('l2'));
initRunning(document.getElementById('thxText'));
initColor(document.getElementById('thxText'));
</script>
</body>
</html>

19
runAway.js Normal file
View File

@ -0,0 +1,19 @@
const rnd = (min, max) => {
const r = min + Math.random() * (min - max + 1);
return Math.floor(r);
}
const initRunning = (obj) => {
obj.style.position = 'absolute';
obj.style.transition = '0.09s';
obj.addEventListener('mouseover', () => {
obj.style.left = `${rnd(30, 50)}%`;
obj.style.top = `${rnd(30, 50)}%`;
});
};
const initColor = (obj) => {
setInterval(() => {
obj.style.color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
}, 100);
};

45
style.css Normal file
View File

@ -0,0 +1,45 @@
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
.inline {
display: inline-block;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}