Lump commit to gh-pages. Comprises initial commit (c1c85b6) through 03db639 on master.
This commit is contained in:
Bryan Braun committed
commit
c5a7a5c97a
52 files changed
+2501
No files matched your search
+188
@@ -0,0 +1,188 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rainstorm | After Dark in CSS</title>
|
||||
<link rel="shortcut icon" href="img/favicon.png" />
|
||||
<link rel="stylesheet" href="base.css">
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
/* lightning animation */
|
||||
-webkit-animation: flash 8s linear infinite;
|
||||
-moz-animation: flash linear 8s infinite;
|
||||
-o-animation: flash linear 8s infinite;
|
||||
animation: flash linear 8s infinite;
|
||||
}
|
||||
|
||||
.rain {
|
||||
position: absolute;
|
||||
width: 3004px; /* (2560 + 1244) */
|
||||
height: 4800px;
|
||||
top: -4800px;
|
||||
left: -1244px;
|
||||
}
|
||||
|
||||
/* Two waves of nearby rain */
|
||||
.r1 {
|
||||
-webkit-animation: fall 2.2s infinite linear;
|
||||
-moz-animation: fall 2.2s infinite linear;
|
||||
-o-animation: fall 2.2s infinite linear;
|
||||
animation: fall 2.2s infinite linear;
|
||||
background: url(img/rain-tile-near.png) repeat;
|
||||
}
|
||||
.r2 {
|
||||
-webkit-animation: fall 2.2s 1s infinite linear;
|
||||
-moz-animation: fall 2.2s 1s infinite linear;
|
||||
-o-animation: fall 2.2s 1s infinite linear;
|
||||
animation: fall 2.2s 1s infinite linear;
|
||||
background: url(img/rain-tile-near.png) repeat;
|
||||
}
|
||||
|
||||
/* Two waves of mid-distant rain */
|
||||
.r3 {
|
||||
-webkit-animation: fall 4s infinite linear;
|
||||
-moz-animation: fall 4s infinite linear;
|
||||
-o-animation: fall 4s infinite linear;
|
||||
animation: fall 4s infinite linear;
|
||||
background: url(img/rain-tile-mid.png) repeat;
|
||||
}
|
||||
.r4 {
|
||||
-webkit-animation: fall 4.5s 3.2s infinite linear;
|
||||
-moz-animation: fall 4.5s 3.2s infinite linear;
|
||||
-o-animation: fall 4.5s 3.2s infinite linear;
|
||||
animation: fall 4.5s 3.2s infinite linear;
|
||||
background: url(img/rain-tile-mid.png) repeat;
|
||||
}
|
||||
|
||||
/* Two waves of distant rain */
|
||||
.r5 {
|
||||
-webkit-animation: fall 6s infinite linear;
|
||||
-moz-animation: fall 6s infinite linear;
|
||||
-o-animation: fall 6s infinite linear;
|
||||
animation: fall 6s infinite linear;
|
||||
background: url(img/rain-tile-distant.png) repeat;
|
||||
}
|
||||
.r6 {
|
||||
-webkit-animation: fall 6s 4s infinite linear;
|
||||
-moz-animation: fall 6s 4s infinite linear;
|
||||
-o-animation: fall 6s 4s infinite linear;
|
||||
animation: fall 6s 4s infinite linear;
|
||||
background: url(img/rain-tile-distant.png) repeat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Falling rain animation
|
||||
* Assumes a max screen resolution of 2560px x 1600px.
|
||||
* Rain falls the size of the div + the estimated
|
||||
* height of the screen (1600 max). 4800 + 1600 = 6400.
|
||||
*
|
||||
* Making the rain fall straight down is easier for ensuring there is always
|
||||
* rain on the screen. However I can preserve the angle of falling rain with
|
||||
* a translateY of 1244px.
|
||||
*/
|
||||
@-webkit-keyframes fall {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(1244px, 6400px);
|
||||
-moz-transform: translate(1244px, 6400px);
|
||||
-o-transform: translate(1244px, 6400px);
|
||||
-ms-transform: translate(1244px, 6400px);
|
||||
transform: translate(1244px, 6400px);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fall {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(1244px, 6400px);
|
||||
-moz-transform: translate(1244px, 6400px);
|
||||
-o-transform: translate(1244px, 6400px);
|
||||
-ms-transform: translate(1244px, 6400px);
|
||||
transform: translate(1244px, 6400px);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fall {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(1244px, 6400px);
|
||||
-moz-transform: translate(1244px, 6400px);
|
||||
-o-transform: translate(1244px, 6400px);
|
||||
-ms-transform: translate(1244px, 6400px);
|
||||
transform: translate(1244px, 6400px);
|
||||
}
|
||||
}
|
||||
@keyframes fall {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-moz-transform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(1244px, 6400px);
|
||||
-moz-transform: translate(1244px, 6400px);
|
||||
-o-transform: translate(1244px, 6400px);
|
||||
-ms-transform: translate(1244px, 6400px);
|
||||
transform: translate(1244px, 6400px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lightning Animation
|
||||
*/
|
||||
@-webkit-keyframes flash {
|
||||
0% { }
|
||||
98% { background: black; }
|
||||
99% { background: white; }
|
||||
100% { background: black; }
|
||||
}
|
||||
@-moz-keyframes flash {
|
||||
0% { }
|
||||
98% { background: black; }
|
||||
99% { background: white; }
|
||||
100% { background: black; }
|
||||
}
|
||||
@-o-keyframes flash {
|
||||
0% { }
|
||||
98% { background: black; }
|
||||
99% { background: white; }
|
||||
100% { background: black; }
|
||||
}
|
||||
@keyframes flash {
|
||||
0% { }
|
||||
98% { background: black; }
|
||||
99% { background: white; }
|
||||
100% { background: black; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="visuallyhidden">Rainstorm Screensaver - After Dark in CSS</h1>
|
||||
<div class="rain r1"></div>
|
||||
<div class="rain r2"></div>
|
||||
<div class="rain r3"></div>
|
||||
<div class="rain r4"></div>
|
||||
<div class="rain r5"></div>
|
||||
<div class="rain r6"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user