54 lines
1.3 KiB
CSS
54 lines
1.3 KiB
CSS
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fade Out | After Dark in CSS</title>
|
|
<link rel="shortcut icon" href="../img/favicon.png" />
|
|
<link rel="stylesheet" href="base.css">
|
|
<style>
|
|
body {
|
|
background: url(../img/macos-desktop.png) no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
.dim {
|
|
position: absolute;
|
|
background-color: black;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
-webkit-animation: fade 40s ease-out 1 forwards;
|
|
-moz-animation: fade 40s ease-out 1 forwards;
|
|
-o-animation: fade 40s ease-out 1 forwards;
|
|
animation: fade 40s ease-out 1 forwards;
|
|
}
|
|
|
|
/* Fade out animation */
|
|
@-webkit-keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@-moz-keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@-o-keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="visuallyhidden">Fade Out Screensaver - After Dark in CSS</h1>
|
|
<div class="dim"></div>
|
|
</body>
|
|
</html> |