57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Messages 2 | After Dark in CSS</title>
|
|
<link rel="shortcut icon" href="img/favicon.png" />
|
|
<link rel="stylesheet" href="base.css">
|
|
<style>
|
|
|
|
/* ball styling */
|
|
.message {
|
|
display: block;
|
|
width: 467px;
|
|
margin: 0;
|
|
color: white;
|
|
position: absolute;
|
|
font-size: 20px;
|
|
/* ball animation */
|
|
-webkit-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
|
|
-moz-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
|
|
-o-animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate;
|
|
animation: moveX 8s linear 0s infinite alternate, moveY 17.3s linear 0s infinite alternate ;
|
|
}
|
|
|
|
/* animation keyframes */
|
|
@-webkit-keyframes moveX {
|
|
/* screen width - width of message */
|
|
from { left: 0; } to { left: calc(100% - 467px); }
|
|
}
|
|
@-moz-keyframes moveX {
|
|
from { left: 0; } to { left: calc(100% - 467px); }
|
|
}
|
|
@-o-keyframes moveX {
|
|
from { left: 0; } to { left: calc(100% - 467px); }
|
|
}
|
|
@keyframes moveX {
|
|
from { left: 0; } to { left: calc(100% - 467px); }
|
|
}
|
|
@-webkit-keyframes moveY {
|
|
from { top: 0; } to { top: calc(100% - 26px); }
|
|
}
|
|
@-moz-keyframes moveY {
|
|
from { top: 0; } to { top: calc(100% - 26px); }
|
|
}
|
|
@-o-keyframes moveY {
|
|
from { top: 0; } to { top: calc(100% - 26px); }
|
|
}
|
|
@keyframes moveY {
|
|
from { top: 0; } to { top: calc(100% - 26px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="visuallyhidden">Messages Screensaver 2 - After Dark in CSS</h1>
|
|
<h2 class="message"> Why are you staring at my Macintosh?</h2>
|
|
</body>
|
|
</html> |