Lump commit to gh-pages. Comprises initial commit (c1c85b6) through 03db639 on master.

This commit is contained in:
Bryan Braun committed 2014-03-10 23:34:30 -04:00
commit c5a7a5c97a
52 files changed
+2501

No files matched your search

Vendored
BIN
View File
Binary file not shown.
+20
View File
@@ -0,0 +1,20 @@
# After Dark in CSS
![After Dark Icon](img/after-dark-icon.png)
Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?
If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.
### [See them here!](http://bryanbraun.github.io/after-dark-css/)
#### Why?
Just for fun.
#### Thanks to:
[Jonathon Sampson](https://twitter.com/jonathansampson), [Keith Clark](http://codepen.io/keithclark/), [Rob Glazebrook](http://www.cssnewbie.com/pure-css-bouncing-ball), [Ryan Justice](http://ned.highline.edu/~ryan-j/200/final/) and others for posting tutorials & demos on CSS animations.
[N. Landsteiner](http://www.masswerk.at/flyer/), [David Donarumo](http://www.youtube.com/watch?v=M1w1SQ3ezh8), and [Lazy Game Reviews](http://www.youtube.com/watch?v=ANnYbX54oU4) for online preservation of what the original screensavers looked like.
Robin Casady for the Public Domain [ChicagoFLF](http://christtrekker.users.sourceforge.net/fnt/chicago.shtml) font.
The original screensavers and artwork are © 1989 Berkeley Systems Inc.
+43
View File
@@ -0,0 +1,43 @@
/* apply a natural box layout model to all elements */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@font-face {
font-family: 'ChicagoFLF';
src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
}
html,
body {
background-color: #111;
margin: 0;
height: 100%;
font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
}
/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
+62
View File
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bouncing Ball | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
/**
* Thanks to Rob Glazebrook, and his article here:
* http://www.cssnewbie.com/pure-css-bouncing-ball
*/
/* ball styling */
b {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
position: absolute;
/* ball animation */
-webkit-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
-moz-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
-o-animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate;
animation: moveX 3.4s linear 0s infinite alternate, moveY 3s linear 0s infinite alternate ;
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of ball */
from { left: calc(100% - 40px); } to { left: 0; }
}
@-moz-keyframes moveX {
from { left: calc(100% - 40px); } to { left: 0; }
}
@-o-keyframes moveX {
from { left: calc(100% - 40px); } to { left: 0; }
}
@keyframes moveX {
from { left: calc(100% - 40px); } to { left: 0; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: calc(100% - 40px); }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: calc(100% - 40px); }
}
@-o-keyframes moveY {
from { top: 0; } to { top: calc(100% - 40px); }
}
@keyframes moveY {
from { top: 0; } to { top: calc(100% - 40px); }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Bouncing Ball Screensaver - After Dark in CSS</h1>
<b></b>
</body>
</html>
+15
View File
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
</style>
</head>
<body>
<h1 class="visuallyhidden">Example Screensaver - After Dark in CSS</h1>
</body>
</html>
+54
View File
@@ -0,0 +1,54 @@
<!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>
+476
View File
@@ -0,0 +1,476 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fish | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
body {
background-color: black;
background-image: url(img/seafloor.jpg);
background-position: bottom;
background-repeat: repeat-x;
}
.bubbles {
position: absolute;
bottom: -60px;
display: block;
width: 50px;
height: 56px;
background-repeat: no-repeat;
background-image: url(img/bubbles_50.png);
-webkit-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
-moz-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
-o-animation: rise 13s linear infinite, reappear 39s steps(3) linear infinite, bubble-alt 0.2s steps(2) infinite;
animation: rise 13s linear infinite, reappear 39s steps(3) linear infinite, bubble-alt 0.2s steps(2) infinite;
}
/**
* Fish
*/
.fish {
position: absolute;
width: 145px;
height: 145px;
/* off-canvas starting position */
left: -50%;
top: -50%;
}
.butterfly {
background-image: url(img/fish-butterfly.png);
}
.guppy {
background-image: url(img/fish-guppy.png);
}
.seahorse {
background-image: url(img/fish-seahorse.png);
}
.jelly {
background-image: url(img/fish-jelly.png);
}
.minnow {
background-image: url(img/fish-minnow.png);
}
.red {
background-image: url(img/fish-red.png);
}
.striped {
background-image: url(img/fish-striped.png);
}
.angel {
background-image: url(img/fish-angel.png);
}
.flounder {
background-image: url(img/fish-flounder.png);
}
/**
* Routes
* Defines speeds, delays, and direction for a fish to go.
*/
.ltr {
/* Left to right & turn around */
-webkit-animation: ltr 26s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: ltr 26s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: ltr 26s linear infinite, toggle 0.2s steps(2) infinite;
animation: ltr 26s linear infinite, toggle 0.2s steps(2) infinite;
}
.ltr-delay1 {
/* Left to right & turn around */
-webkit-animation: ltr 26s 4s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: ltr 26s 4s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: ltr 26s 4s linear infinite, toggle 0.2s steps(2) infinite;
animation: ltr 26s 4s linear infinite, toggle 0.2s steps(2) infinite;
}
.ltr-delay2 {
/* Left to right & turn around */
-webkit-animation: ltr 26s 8s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: ltr 26s 8s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: ltr 26s 8s linear infinite, toggle 0.2s steps(2) infinite;
animation: ltr 26s 8s linear infinite, toggle 0.2s steps(2) infinite;
}
.ltr-fast {
/* Left to right & turn around */
-webkit-animation: ltr 17s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: ltr 17s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: ltr 17s linear infinite, toggle 0.2s steps(2) infinite;
animation: ltr 17s linear infinite, toggle 0.2s steps(2) infinite;
}
.rtl {
/* Right to left & turn around */
-webkit-animation: rtl 26s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: rtl 26s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: rtl 26s linear infinite, toggle 0.2s steps(2) infinite;
animation: rtl 26s linear infinite, toggle 0.2s steps(2) infinite;
}
.rtl-delay1 {
/* Right to left & turn around */
-webkit-animation: rtl 26s 3s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: rtl 26s 3s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: rtl 26s 3s linear infinite, toggle 0.2s steps(2) infinite;
animation: rtl 26s 4s linear infinite, toggle 0.2s steps(2) infinite;
}
.rtl-delay2 {
/* Right to left & turn around */
-webkit-animation: rtl 26s 7s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: rtl 26s 7s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: rtl 26s 7s linear infinite, toggle 0.2s steps(2) infinite;
animation: rtl 26s 7s linear infinite, toggle 0.2s steps(2) infinite;
}
.rtl-fast {
/* Right to left & turn around */
-webkit-animation: rtl 17s linear infinite, toggle 0.2s steps(2) infinite;
-moz-animation: rtl 17s linear infinite, toggle 0.2s steps(2) infinite;
-o-animation: rtl 17s linear infinite, toggle 0.2s steps(2) infinite;
animation: rtl 17s linear infinite, toggle 0.2s steps(2) infinite;
}
/**
* Positions
*/
.row1 { top: 0%; }
.row2 { top: 9% }
.row3 { top: 18%; }
.row4 { top: 27%; }
.row5 { top: 36%; }
.row6 { top: 45%; }
.row7 { top: 54%; }
.row8 { top: 63%; }
.row9 { top: 72%; }
/**
* Keyframes
*/
/* LTR - Moves fish from left to right and back again */
@-webkit-keyframes ltr {
0% { left: -30%; }
50% { left: 110%; }
51% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
52% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: -30%;
}
}
@-moz-keyframes ltr {
0% { left: -30%; }
50% { left: 110%; }
51% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
52% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: -30%;
}
}
@-o-keyframes ltr {
0% { left: -30%; }
50% { left: 110%; }
51% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
52% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: -30%;
}
}
@keyframes ltr {
0% { left: -30%; }
50% { left: 110%; }
51% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}
52% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: -30%;
}
}
/* RTL - Moves fish from right to left, and back again */
@-webkit-keyframes rtl {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: 110%;
}
50% { left: -30%; }
51% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
52% { -webkit-transform: rotateY(0deg); }
100% { left: 110%; }
}
@-moz-keyframes rtl {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: 110%;
}
50% { left: -30%; }
51% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
52% { -webkit-transform: rotateY(0deg); }
100% { left: 110%; }
}
@-o-keyframes rtl {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: 110%;
}
50% { left: -30%; }
51% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
52% { -webkit-transform: rotateY(0deg); }
100% { left: 110%; }
}
@keyframes rtl {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
left: 110%;
}
50% { left: -30%; }
51% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
52% { -webkit-transform: rotateY(0deg); }
100% { left: 110%; }
}
/* bubble keyframes */
/* rise */
@-webkit-keyframes rise {
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(0, -1800px);
-moz-transform: translate(0, -1800px);
-o-transform: translate(0, -1800px);
-ms-transform: translate(0, -1800px);
transform: translate(0, -1800px);
}
}
@-moz-keyframes rise {
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(0, -1800px);
-moz-transform: translate(0, -1800px);
-o-transform: translate(0, -1800px);
-ms-transform: translate(0, -1800px);
transform: translate(0, -1800px);
}
}
@-o-keyframes rise {
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(0, -1800px);
-moz-transform: translate(0, -1800px);
-o-transform: translate(0, -1800px);
-ms-transform: translate(0, -1800px);
transform: translate(0, -1800px);
}
}
@keyframes rise {
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(0, -1800px);
-moz-transform: translate(0, -1800px);
-o-transform: translate(0, -1800px);
-ms-transform: translate(0, -1800px);
transform: translate(0, -1800px);
}
}
/* Bubbles reappear */
@-webkit-keyframes reappear {
from { left: 20%; }
to { left: 80%; }
}
@-moz-keyframes reappear {
from { left: 20%; }
to { left: 80%; }
}
@-o-keyframes reappear {
from { left: 20%; }
to { left: 80%; }
}
@keyframes reappear {
from { left: 20%; }
to { left: 80%; }
}
/* Bubble-alt - alternating the bubble images */
@-webkit-keyframes bubble-alt {
from { background-position: 0; }
to { background-position: -100px; }
}
@-moz-keyframes bubble-alt {
from { background-position: 0; }
to { background-position: -100px; }
}
@-o-keyframes bubble-alt {
from { background-position: 0; }
to { background-position: -100px; }
}
@keyframes bubble-alt {
from { background-position: 0; }
to { background-position: -100px; }
}
/* Toggle - for toggling any two fish images in the sprite */
@-webkit-keyframes toggle {
from { background-position: 0; }
to { background-position: -290px; }
}
@-moz-keyframes toggle {
from { background-position: 0; }
to { background-position: -290px; }
}
@-o-keyframes toggle {
from { background-position: 0; }
to { background-position: -290px; }
}
@keyframes toggle {
from { background-position: 0; }
to { background-position: -290px; }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Fish Screensaver - After Dark in CSS</h1>
<b class="bubbles"></b>
<div class="butterfly fish row1 ltr"></div>
<div class="jelly fish row1 rtl-fast"></div>
<div class="guppy fish row2 rtl"></div>
<div class="angel fish row2 rtl-delay1"></div>
<div class="seahorse fish row3 rtl-delay-2"></div>
<div class="red fish row4 rtl-delay2"></div>
<div class="jelly fish row4 ltr"></div>
<div class="minnow fish row5 rtl"></div>
<div class="seahorse fish row5 ltr-fast"></div>
<div class="angel fish row6 rtl-fast"></div>
<div class="striped fish row7 ltr"></div>
<div class="guppy fish row7 ltr-delay1"></div>
<div class="angel fish row8 ltr-delay2"></div>
<div class="minnow fish row8 rtl-delay2"></div>
<div class="flounder fish row9 rtl"></div>
<div class="red fish row9 ltr-delay1"></div>
</body>
</html
+337
View File
@@ -0,0 +1,337 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flying Toasters | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
.toaster {
position: absolute;
width: 64px;
height: 64px;
background-image: url("img/toaster-sprite.gif");
}
.toast {
position: absolute;
width: 64px;
height: 64px;
background-image: url("img/toast1.gif");
}
/**
* Toaster Animations
*
* There are several kinds of toaster animations, marked as t1, t2, & t3.
*
* T1 is fastest speed
* T2 is mid speed & flaps out of sequence with T1
* T3 is the common speed
* T4 is a deleyd batch going at the fastest speed
* T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
*/
.t1 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
}
.t2 {
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
}
.t3 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
}
.t4 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
}
.t5 {
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
}
.t6 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
}
.t7 {
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
}
.t8 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
}
.t9 {
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
}
/**
* Toast Animations
*
* There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
*
* Tst1 is fast
* Tst2 is mid speed
* Tst3 is the common speed
* Tst4 is a delayed batch of toast going at the common speed
*/
.tst1 {
-webkit-animation: fly 10s linear infinite;
-moz-animation: fly 10s linear infinite;
-ms-animation: fly 10s linear infinite;
-o-animation: fly 10s linear infinite;
animation: fly 10s linear infinite;
}
.tst2 {
-webkit-animation: fly 16s linear infinite;
-moz-animation: fly 16s linear infinite;
-ms-animation: fly 16s linear infinite;
-o-animation: fly 16s linear infinite;
animation: fly 16s linear infinite;
}
.tst3 {
-webkit-animation: fly 24s linear infinite;
-moz-animation: fly 24s linear infinite;
-ms-animation: fly 24s linear infinite;
-o-animation: fly 24s linear infinite;
animation: fly 24s linear infinite;
}
.tst4 {
-webkit-animation: fly 24s 12s linear infinite;
-moz-animation: fly 24s 12s linear infinite;
-ms-animation: fly 24s 12s linear infinite;
-o-animation: fly 24s 12s linear infinite;
animation: fly 24s 12s linear infinite;
}
/**
* Starting positions of objects (both toast & toasters).
* - There is a different position for each object to prevent overlapping.
* - We use percentages in order to accomodate for all window dimensions.
* - Use -6% as the smallest amount for remaining off-screen.
* - Organized into reverse "L" shaped batches to keep a constant flow.
*/
/* Batch 1 (-10% to -20%) */
/* Top edge, from right to left */
.p6 { right: -2%; top: -10%; }
.p7 { right: 10%; top: -12%; }
.p8 { right: 20%; top: -18%; }
.p9 { right: 30%; top: -13%; }
.p10 { right: 40%; top: -17%; }
.p11 { right: 50%; top: -11%; }
.p12 { right: 60%; top: -20%; }
/* Right side, from top to bottom */
.p13 { right: -10%; top: 10%; }
.p14 { right: -13%; top: 20%; }
.p15 { right: -17%; top: 30%; }
.p16 { right: -15%; top: 50%; }
.p17 { right: -20%; top: 70%; }
/* Batch 2 (-20% to -40%) */
/* Top edge, from right to left */
.p18 { right: 0%; top: -26%; }
.p19 { right: 10%; top: -20%; }
.p20 { right: 20%; top: -36%; }
.p21 { right: 30%; top: -24%; }
.p22 { right: 40%; top: -33%; }
.p23 { right: 60%; top: -40%; }
/* Right side, from top to bottom */
.p24 { right: -26%; top: 10%; }
.p25 { right: -36%; top: 30%; }
.p26 { right: -29%; top: 50%; }
/* Batch 3 (-40% to -60%)*/
/* Top edge, from right to left */
.p27 { right: 0; top: -46%; }
.p28 { right: 10%; top: -56%; }
.p29 { right: 20%; top: -49%; }
.p30 { right: 30%; top: -60%; }
/* Right side, from top to bottom */
.p31 { right: -46%; top: 10%; }
.p32 { right: -56%; top: 20%; }
.p33 { right: -49%; top: 30%; }
/* Flapping animation */
@-webkit-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@-moz-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@-o-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
/* Gliding animation using translate */
/* Moving 1600px, to accomodate for large screens */
@-webkit-keyframes fly {
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(-1600px, 1600px);
-moz-transform: translate(-1600px, 1600px);
-o-transform: translate(-1600px, 1600px);
-ms-transform: translate(-1600px, 1600px);
transform: translate(-1600px, 1600px);
}
}
@-moz-keyframes fly {
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(-1600px, 1600px);
-moz-transform: translate(-1600px, 1600px);
-o-transform: translate(-1600px, 1600px);
-ms-transform: translate(-1600px, 1600px);
transform: translate(-1600px, 1600px);
}
}
@-o-keyframes fly {
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(-1600px, 1600px);
-moz-transform: translate(-1600px, 1600px);
-o-transform: translate(-1600px, 1600px);
-ms-transform: translate(-1600px, 1600px);
transform: translate(-1600px, 1600px);
}
}
@keyframes fly {
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(-1600px, 1600px);
-moz-transform: translate(-1600px, 1600px);
-o-transform: translate(-1600px, 1600px);
-ms-transform: translate(-1600px, 1600px);
transform: translate(-1600px, 1600px);
}
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1>
<!-- First group of objects -->
<div class="toaster t1 p6"></div>
<div class="toaster t3 p7"></div>
<div class="toast tst1 p8"></div>
<div class="toaster t3 p9"></div>
<div class="toaster t1 p11"></div>
<div class="toaster t3 p12"></div>
<div class="toaster t2 p13"></div>
<div class="toast tst3 p14"></div>
<div class="toast tst2 p16"></div>
<div class="toaster t1 p17"></div>
<div class="toast tst2 p19"></div>
<div class="toast tst3 p20"></div>
<div class="toaster t2 p21"></div>
<div class="toast tst1 p24"></div>
<div class="toaster t1 p22"></div>
<div class="toast tst2 p26"></div>
<div class="toaster t1 p28"></div>
<div class="toast tst2 p30"></div>
<div class="toaster t2 p31"></div>
<div class="toaster t1 p32"></div>
<div class="toast tst3 p33"></div>
<!-- wave 1 of (fast delayed) objects -->
<div class="toaster t4 p27"></div>
<div class="toaster t4 p10"></div>
<div class="toaster t4 p25"></div>
<div class="toaster t4 p29"></div>
<!-- wave 2 of (delayed) objects -->
<div class="toaster t5 p15"></div>
<div class="toaster t5 p18"></div>
<div class="toaster t5 p22"></div>
<!-- wave 3 of (delayed) objects -->
<div class="toaster t6 p6"></div>
<div class="toaster t6 p11"></div>
<div class="toaster t6 p15"></div>
<div class="toaster t6 p19"></div>
<div class="toaster t6 p23"></div>
<!-- wave 5 of (delayed) objects -->
<div class="toast tst4 p10"></div>
<div class="toast tst4 p23"></div>
<div class="toast tst4 p15"></div>
<div class="toaster t7 p7"></div>
<div class="toaster t7 p12"></div>
<div class="toaster t7 p16"></div>
<div class="toaster t7 p20"></div>
<div class="toaster t7 p24"></div>
<!-- wave 6 of (delayed) objects -->
<div class="toaster t8 p8"></div>
<div class="toaster t8 p13"></div>
<div class="toaster t8 p17"></div>
<div class="toaster t8 p25"></div>
<!-- wave 7 of (delayed) objects -->
<div class="toaster t9 p14"></div>
<div class="toaster t9 p18"></div>
<div class="toaster t9 p21"></div>
<div class="toaster t9 p26"></div>
</body>
</html>
Binary file not shown.
Binary file not shown.
+23
View File
@@ -0,0 +1,23 @@
PUBLIC DOMAIN (statement from original designer via email 2014/01/30)
The FLF were created by various authors including myself and Mike Wright. When Casady & Greene, Inc. closed the rights went back to the authors. I created ChicagoFLF and CheckboxFLF. You are free to use them as you wish. I consider those two in the public domain.
Regards,
Robin Casady
VERSION HISTORY
2.0
No changes were made except the following:
* Moved symbols to correct Unicode positions.
* Incorporated additional symbols from CheckboxFLF, which used identical
Basic Latin glyphs, and thus was essentially the "same" font with
different symbols.
* Very simple compositions from existing glyphs, and other homoglyphic
supplementation.
* Updates to some metadata.
Because no outlines were added or modified, this is, in a very real sense,
the "same" font as Robin's, so I've kept the same name and incremented
the version.
+86
View File
@@ -0,0 +1,86 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Globe | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
body {
background-color: black;
}
/* ball styling */
b {
display: block;
width: 240px;
height: 240px;
position: absolute;
background-color: black;
background-image: url(img/globe_240.jpg);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* globe animation */
-webkit-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 1.4s steps(21) infinite;
-moz-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 1.4s steps(21) infinite;
-o-animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 1.4s steps(21) infinite;
animation: moveX 3s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, spin 1.4s steps(21) infinite;
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of ball */
from { left: calc(100% - 240px); } to { left: 0; }
}
@-moz-keyframes moveX {
from { left: calc(100% - 240px); } to { left: 0; }
}
@-o-keyframes moveX {
from { left: calc(100% - 240px); } to { left: 0; }
}
@keyframes moveX {
from { left: calc(100% - 240px); } to { left: 0; }
}
@-webkit-keyframes moveY {
from { top: calc(100% - 240px); } to { top: 0; }
}
@-moz-keyframes moveY {
from { top: calc(100% - 240px); } to { top: 0; }
}
@-o-keyframes moveY {
from { top: calc(100% - 240px); } to { top: 0; }
}
@keyframes moveY {
from { top: calc(100% - 240px); } to { top: 0; }
}
/* Spinning animation */
@-webkit-keyframes spin {
from { background-position: -5040px; }
to { background-position: 0px; }
}
@-moz-keyframes spin {
from { background-position: -5040px; }
to { background-position: 0px; }
}
@-ms-keyframes spin {
from { background-position: -5040px; }
to { background-position: 0px; }
}
@-o-keyframes spin {
from { background-position: -5040px; }
to { background-position: 0px; }
}
@keyframes spin {
from { background-position: -5040px; }
to { background-position: 0px; }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Globe Screensaver - After Dark in CSS</h1>
<b></b>
</body>
</html>
+458
View File
@@ -0,0 +1,458 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Rain | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/* shared raindrop attributes */
.r {
position: absolute;
display: block;
border-radius: 50%;
border-style: solid;
border-width: 2px;
}
/**
* Animation timing
* Each one has a slightly later delay
* We'll aim to use one per raindrop (total of 30)
*/
.t1 {
-webkit-animation: drip 4.5s -4.35s ease-in-out infinite;
-moz-animation: drip 4.5s -4.35s ease-in-out infinite;
-o-animation: drip 4.5s -4.35s ease-in-out infinite;
animation: drip 4.5s -4.35s ease-in-out infinite;
}
.t2 {
-webkit-animation: drip 4.5s -4.2s ease-in-out infinite;
-moz-animation: drip 4.5s -4.2s ease-in-out infinite;
-o-animation: drip 4.5s -4.2s ease-in-out infinite;
animation: drip 4.5s -4.2s ease-in-out infinite;
}
.t3 {
-webkit-animation: drip 4.5s -4.05s ease-in-out infinite;
-moz-animation: drip 4.5s -4.05s ease-in-out infinite;
-o-animation: drip 4.5s -4.05s ease-in-out infinite;
animation: drip 4.5s -4.05s ease-in-out infinite;
}
.t4 {
-webkit-animation: drip 4.5s -3.9s ease-in-out infinite;
-moz-animation: drip 4.5s -3.9s ease-in-out infinite;
-o-animation: drip 4.5s -3.9s ease-in-out infinite;
animation: drip 4.5s -3.9s ease-in-out infinite;
}
.t5 {
-webkit-animation: drip 4.5s -3.75s ease-in-out infinite;
-moz-animation: drip 4.5s -3.75s ease-in-out infinite;
-o-animation: drip 4.5s -3.75s ease-in-out infinite;
animation: drip 4.5s -3.75s ease-in-out infinite;
}
.t6 {
-webkit-animation: drip 4.5s -3.6s ease-in-out infinite;
-moz-animation: drip 4.5s -3.6s ease-in-out infinite;
-o-animation: drip 4.5s -3.6s ease-in-out infinite;
animation: drip 4.5s -3.6s ease-in-out infinite;
}
.t7 {
-webkit-animation: drip 4.5s -3.45s ease-in-out infinite;
-moz-animation: drip 4.5s -3.45s ease-in-out infinite;
-o-animation: drip 4.5s -3.45s ease-in-out infinite;
animation: drip 4.5s -3.45s ease-in-out infinite;
}
.t8 {
-webkit-animation: drip 4.5s -3.3s ease-in-out infinite;
-moz-animation: drip 4.5s -3.3s ease-in-out infinite;
-o-animation: drip 4.5s -3.3s ease-in-out infinite;
animation: drip 4.5s -3.3s ease-in-out infinite;
}
.t9 {
-webkit-animation: drip 4.5s -3.15s ease-in-out infinite;
-moz-animation: drip 4.5s -3.15s ease-in-out infinite;
-o-animation: drip 4.5s -3.15s ease-in-out infinite;
animation: drip 4.5s -3.15s ease-in-out infinite;
}
.t10 {
-webkit-animation: drip 4.5s -3s ease-in-out infinite;
-moz-animation: drip 4.5s -3s ease-in-out infinite;
-o-animation: drip 4.5s -3s ease-in-out infinite;
animation: drip 4.5s -3s ease-in-out infinite;
}
.t11 {
-webkit-animation: drip 4.5s -2.85s ease-in-out infinite;
-moz-animation: drip 4.5s -2.85s ease-in-out infinite;
-o-animation: drip 4.5s -2.85s ease-in-out infinite;
animation: drip 4.5s -2.85s ease-in-out infinite;
}
.t12 {
-webkit-animation: drip 4.5s -2.7s ease-in-out infinite;
-moz-animation: drip 4.5s -2.7s ease-in-out infinite;
-o-animation: drip 4.5s -2.7s ease-in-out infinite;
animation: drip 4.5s -2.7s ease-in-out infinite;
}
.t13 {
-webkit-animation: drip 4.5s -2.55s ease-in-out infinite;
-moz-animation: drip 4.5s -2.55s ease-in-out infinite;
-o-animation: drip 4.5s -2.55s ease-in-out infinite;
animation: drip 4.5s -2.55s ease-in-out infinite;
}
.t14 {
-webkit-animation: drip 4.5s -2.4s ease-in-out infinite;
-moz-animation: drip 4.5s -2.4s ease-in-out infinite;
-o-animation: drip 4.5s -2.4s ease-in-out infinite;
animation: drip 4.5s -2.4s ease-in-out infinite;
}
.t15 {
-webkit-animation: drip 4.5s -2.25s ease-in-out infinite;
-moz-animation: drip 4.5s -2.25s ease-in-out infinite;
-o-animation: drip 4.5s -2.25s ease-in-out infinite;
animation: drip 4.5s -2.25s ease-in-out infinite;
}
.t16 {
-webkit-animation: drip 4.5s -2.1s ease-in-out infinite;
-moz-animation: drip 4.5s -2.1s ease-in-out infinite;
-o-animation: drip 4.5s -2.1s ease-in-out infinite;
animation: drip 4.5s -2.1s ease-in-out infinite;
}
.t17 {
-webkit-animation: drip 4.5s -1.95s ease-in-out infinite;
-moz-animation: drip 4.5s -1.95s ease-in-out infinite;
-o-animation: drip 4.5s -1.95s ease-in-out infinite;
animation: drip 4.5s -1.95s ease-in-out infinite;
}
.t18 {
-webkit-animation: drip 4.5s -1.8s ease-in-out infinite;
-moz-animation: drip 4.5s -1.8s ease-in-out infinite;
-o-animation: drip 4.5s -1.8s ease-in-out infinite;
animation: drip 4.5s -1.8s ease-in-out infinite;
}
.t19 {
-webkit-animation: drip 4.5s -1.65s ease-in-out infinite;
-moz-animation: drip 4.5s -1.65s ease-in-out infinite;
-o-animation: drip 4.5s -1.65s ease-in-out infinite;
animation: drip 4.5s -1.65s ease-in-out infinite;
}
.t20 {
-webkit-animation: drip 4.5s -1.5s ease-in-out infinite;
-moz-animation: drip 4.5s -1.5s ease-in-out infinite;
-o-animation: drip 4.5s -1.5s ease-in-out infinite;
animation: drip 4.5s -1.5s ease-in-out infinite;
}
.t21 {
-webkit-animation: drip 4.5s -1.35s ease-in-out infinite;
-moz-animation: drip 4.5s -1.35s ease-in-out infinite;
-o-animation: drip 4.5s -1.35s ease-in-out infinite;
animation: drip 4.5s -1.35s ease-in-out infinite;
}
.t22 {
-webkit-animation: drip 4.5s -1.2s ease-in-out infinite;
-moz-animation: drip 4.5s -1.2s ease-in-out infinite;
-o-animation: drip 4.5s -1.2s ease-in-out infinite;
animation: drip 4.5s -1.2s ease-in-out infinite;
}
.t23 {
-webkit-animation: drip 4.5s -1.05s ease-in-out infinite;
-moz-animation: drip 4.5s -1.05s ease-in-out infinite;
-o-animation: drip 4.5s -1.05s ease-in-out infinite;
animation: drip 4.5s -1.05s ease-in-out infinite;
}
.t24 {
-webkit-animation: drip 4.5s -0.9s ease-in-out infinite;
-moz-animation: drip 4.5s -0.9s ease-in-out infinite;
-o-animation: drip 4.5s -0.9s ease-in-out infinite;
animation: drip 4.5s -0.9s ease-in-out infinite;
}
.t25 {
-webkit-animation: drip 4.5s -0.75s ease-in-out infinite;
-moz-animation: drip 4.5s -0.75s ease-in-out infinite;
-o-animation: drip 4.5s -0.75s ease-in-out infinite;
animation: drip 4.5s -0.75s ease-in-out infinite;
}
.t26 {
-webkit-animation: drip 4.5s -0.6s ease-in-out infinite;
-moz-animation: drip 4.5s -0.6s ease-in-out infinite;
-o-animation: drip 4.5s -0.6s ease-in-out infinite;
animation: drip 4.5s -0.6s ease-in-out infinite;
}
.t27 {
-webkit-animation: drip 4.5s -0.45s ease-in-out infinite;
-moz-animation: drip 4.5s -0.45s ease-in-out infinite;
-o-animation: drip 4.5s -0.45s ease-in-out infinite;
animation: drip 4.5s -0.45s ease-in-out infinite;
}
.t28 {
-webkit-animation: drip 4.5s -0.3s ease-in-out infinite;
-moz-animation: drip 4.5s 0.3s ease-in-out infinite;
-o-animation: drip 4.5s 0.3s ease-in-out infinite;
animation: drip 4.5s 0.3s ease-in-out infinite;
}
.t29 {
-webkit-animation: drip 4.5s -0.15s ease-in-out infinite;
-moz-animation: drip 4.5s -0.15s ease-in-out infinite;
-o-animation: drip 4.5s -0.15s ease-in-out infinite;
animation: drip 4.5s -0.15s ease-in-out infinite;
}
.t30 {
-webkit-animation: drip 4.5s ease-in-out infinite;
-moz-animation: drip 4.5s ease-in-out infinite;
-o-animation: drip 4.5s ease-in-out infinite;
animation: drip 4.5s ease-in-out infinite;
}
/* positions */
/* row 1 */
.p0-1 { top: -2%; left: 5%; }
.p0-2 { top: -17%; left: 25%; }
.p0-3 { top: 4%; left: 45%; }
.p0-4 { top: -4%; left: 65%; }
.p0-5 { top: 1%; left: 85%; }
/* row 2 */
.p1-1 { top: 18%; left: 5%; }
.p1-2 { top: 7%; left: 25%; }
.p1-3 { top: 24%; left: 45%; }
.p1-4 { top: 16%; left: 65%; }
.p1-5 { top: 21%; left: 85%; }
/* row 3 */
.p2-1 { top: 38%; left: 15%; }
.p2-2 { top: 27%; left: 35%; }
.p2-3 { top: 44%; left: 55%; }
.p2-4 { top: 36%; left: 75%; }
.p2-5 { top: 41%; left: 95%; }
/* row 4 */
.p3-1 { top: 58%; left: 5%; }
.p3-2 { top: 47%; left: 25%; }
.p3-3 { top: 64%; left: 45%; }
.p3-4 { top: 56%; left: 65%; }
.p3-5 { top: 61%; left: 85%; }
/* row 5 */
.p4-1 { top: 78%; left: 15%; }
.p4-2 { top: 67%; left: 35%; }
.p4-3 { top: 84%; left: 55%; }
.p4-4 { top: 76%; left: 75%; }
.p4-5 { top: 81%; left: 95%; }
/* row 6 */
.p5-1 { top: 98%; left: 15%; }
.p5-2 { top: 87%; left: 35%; }
.p5-3 { top: 104%; left: 55%; }
.p5-4 { top: 96%; left: 75%; }
.p5-5 { top: 101%; left: 95%; }
/* sizes (smallest to largest) */
.s140 {
/**
* Margins are required for a drop to remain centered
* as it grows. The margin is half the drop diameter.
*/
margin: -70px 0 0 -70px;
width: 140px;
height: 140px;
}
.s200 {
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
}
.s250 {
margin: -125px 0 0 -125px;
width: 250px;
height: 250px;
}
.s300 {
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
.s350 {
margin: -175px 0 0 -175px;
width: 350px;
height: 350px;
}
/* colors (pulled from screenshots) */
.dkblue { border-color: #00006e; }
.lime { border-color: #c8d354; }
.ltgray { border-color: #c2c2c2; }
.red { border-color: #861f23; }
.ltblue { border-color: #45a0cc; }
.pink { border-color: #9a3368; }
.yellow { border-color: #efda1d; }
.green { border-color: #397132; }
/**
* Keyframes
* They are kind of wordy, but that allows them to be used
* for drops of any size, position, and color. Cool!
*/
@-webkit-keyframes drip {
0% {
border: none;
width: 0;
height: 0;
margin: 0;
}
89% {
border: 2px solid #111;
}
90% {
width: 0;
height: 0;
margin: 0;
}
100% {
display: none;
}
}
@-moz-keyframes drip {
0% {
border: none;
width: 0;
height: 0;
margin: 0;
}
89% {
border: 2px solid #111;
}
90% {
width: 0;
height: 0;
margin: 0;
}
100% {
display: none;
}
}
@-o-keyframes drip {
0% {
border: none;
width: 0;
height: 0;
margin: 0;
}
89% {
border: 2px solid #111;
}
90% {
width: 0;
height: 0;
margin: 0;
}
100% {
display: none;
}
}
@keyframes drip {
0% {
border: none;
width: 0;
height: 0;
margin: 0;
}
89% {
border: 2px solid #111;
}
90% {
width: 0;
height: 0;
margin: 0;
}
100% {
display: none;
}
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Hard Rain Screensaver - After Dark in CSS</h1>
<!-- row 1 -->
<div class="r t7 p0-1 s200 dkblue"></div>
<div class="r t23 p0-2 s350 lime"></div>
<div class="r t17 p0-3 s140 ltgray"></div>
<div class="r t11 p0-4 s300 red"></div>
<div class="r t14 p0-5 s250 ltblue"></div>
<!-- row 2 -->
<div class="r t29 p1-1 s350 pink"></div>
<div class="r t18 p1-2 s300 yellow"></div>
<div class="r t30 p1-3 s140 green"></div>
<div class="r t12 p1-4 s200 ltgray"></div>
<div class="r t27 p1-5 s250 dkblue"></div>
<!-- row 3 -->
<div class="r t10 p2-1 s140 pink"></div>
<div class="r t4 p2-2 s200 red"></div>
<div class="r t8 p2-3 s300 ltblue"></div>
<div class="r t22 p2-4 s350 yellow"></div>
<div class="r t1 p2-5 s250 lime"></div>
<!-- row 4 -->
<div class="r t3 p3-1 s300 green"></div>
<div class="r t6 p3-2 s250 dkblue"></div>
<div class="r t15 p3-3 s350 ltgray"></div>
<div class="r t24 p3-4 s140 pink"></div>
<div class="r t21 p3-5 s200 ltblue"></div>
<!-- row 5 -->
<div class="r t13 p4-1 s250 yellow"></div>
<div class="r t28 p4-2 s140 red"></div>
<div class="r t2 p4-3 s200 ltgray"></div>
<div class="r t19 p4-4 s300 green"></div>
<div class="r t25 p4-5 s350 lime"></div>
<!-- row 6 -->
<div class="r t5 p5-1 s350 dkblue"></div>
<div class="r t26 p5-2 s300 pink"></div>
<div class="r t20 p5-3 s140 ltblue"></div>
<div class="r t16 p5-4 s250 yellow"></div>
<div class="r t9 p5-5 s200 ltgray"></div>
<!-- batch 2 (out of sequence) -->
<!-- row 1 -->
<div class="r t22 p0-1 s200 dkblue"></div>
<div class="r t8 p0-2 s350 lime"></div>
<div class="r t2 p0-3 s140 ltgray"></div>
<div class="r t26 p0-4 s300 red"></div>
<div class="r t29 p0-5 s250 ltblue"></div>
<!-- row 2 -->
<div class="r t14 p1-1 s350 pink"></div>
<div class="r t3 p1-2 s300 yellow"></div>
<div class="r t15 p1-3 s140 green"></div>
<div class="r t27 p1-4 s200 ltgray"></div>
<div class="r t12 p1-5 s250 dkblue"></div>
<!-- row 3 -->
<div class="r t25 p2-1 s140 pink"></div>
<div class="r t19 p2-2 s200 red"></div>
<div class="r t23 p2-3 s300 ltblue"></div>
<div class="r t7 p2-4 s350 yellow"></div>
<div class="r t16 p2-5 s250 lime"></div>
<!-- row 4 -->
<div class="r t18 p3-1 s300 green"></div>
<div class="r t21 p3-2 s250 dkblue"></div>
<div class="r t30 p3-3 s350 ltgray"></div>
<div class="r t9 p3-4 s140 pink"></div>
<div class="r t6 p3-5 s200 ltblue"></div>
<!-- row 5 -->
<div class="r t28 p4-1 s250 yellow"></div>
<div class="r t13 p4-2 s140 red"></div>
<div class="r t17 p4-3 s200 ltgray"></div>
<div class="r t4 p4-4 s300 green"></div>
<div class="r t10 p4-5 s350 lime"></div>
<!-- row 6 -->
<div class="r t20 p5-1 s350 dkblue"></div>
<div class="r t11 p5-2 s300 pink"></div>
<div class="r t5 p5-3 s140 ltblue"></div>
<div class="r t1 p5-4 s250 yellow"></div>
<div class="r t24 p5-5 s200 ltgray"></div>
</body>
</html>
BIN
View File
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 464 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

+229
View File
@@ -0,0 +1,229 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
html,
body {
background-color: #929292;
}
a {
color: black;
}
.content {
position: relative;
z-index: 2;
width: 260px;
margin: 100px auto 0;
border: 1px solid #111;
background: #fff;
box-shadow: 1px 1px #111;
}
.title {
text-align: center;
font-size: 12px;
letter-spacing: -1px;
padding: 1px 0;
margin: 1px 0 0 0;
border-bottom: 1px solid #111;
background-color: #f0f0f0;
box-shadow: inset 1px -3px 0px -2px #a8a9b6;
}
.title:before {
height: 11px;
width: 64px;
display: inline-block;
content: "";
background: url(img/lines.png) repeat;
margin-right: 8px;
}
.title:after {
height: 11px;
width: 64px;
display: inline-block;
content: "";
background: url(img/lines.png) repeat;
margin-left: 8px;
}
.content .ad {
text-align: center;
margin: 1em 0;
}
.content ul {
list-style-type: none;
margin: 2px 0 2em 0;
padding: 0 0 0 2em;
font-size: 12px;
}
.footer {
width: 400px;
text-align: center;
margin: 2em auto 0;
font-size: 12px;
}
.closebox {
position: absolute;
top: 3px;
left: 10px;
padding: 1px;
background-color: #d1d2e3;
border-top: 1px solid #38394a;
border-left: 1px solid #38394a;
box-shadow: 0 0 0px 1px #f0f0f0;
}
.closebox-innr {
display: block;
height: 8px;
width: 8px;
background-color: #a2a5ae;
border-bottom: 1px solid #38394a;
border-right: 1px solid #38394a;
text-indent: -99999em;
}
.closebox-innr:hover {
background-color: #ccc;
}
.maxbox {
position: absolute;
top: 3px;
right: 10px;
padding: 1px;
background-color: #d1d2e3;
border-top: 1px solid #38394a;
border-left: 1px solid #38394a;
box-shadow: 0 0 0px 1px #f0f0f0;
}
.maxbox-innr {
height: 8px;
width: 8px;
background-color: #a2a5ae;
border-bottom: 1px solid #38394a;
border-right: 1px solid #38394a;
}
.maxbox-innr:before {
height: 5px;
width: 5px;
border-bottom: 1px solid #38394a;
border-right: 1px solid #38394a;
background-color: #a2a4ae;
display: block;
content: "";
}
/* Hidden Toaster */
.behind {
position: absolute;
left: 50%;
top: 200px;
z-index: 1;
margin-left: -50px;
width: 100px;
font-size: 12px;
text-align: center;
}
.toaster {
width: 64px;
height: 64px;
margin: 0 auto 2em;
background-image: url("img/toaster-sprite.gif");
-webkit-animation: flap .2s steps(4) infinite alternate;
-moz-animation: flap .2s steps(4) infinite alternate;
-o-animation: flap .2s steps(4) infinite alternate;
animation: flap .2s steps(4) infinite alternate;
}
/* Flapping animation */
@-webkit-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@-moz-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@-ms-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@-o-keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
@keyframes flap {
from { background-position: 0px; }
to { background-position: -256px; }
}
</style>
<script>
/* The Randomizer Script -- goes to a random screensaver */
window.onload = function () {
/* Set click events */
var elem = document.getElementById('randomizer');
elem.onclick = random;
var x = document.getElementById('x');
x.onclick = close;
function random() {
/* Build a list of href's */
var choices = Array();
var elements = document.querySelectorAll('.s');
Array.prototype.forEach.call(elements, function(el, i){
choices.push(el.getAttribute('href'));
});
/* Count our choices */
count = choices.length;
/* Pick a screenshot at random and browse there */
choice = Math.floor(Math.random() * count);
window.location.href = choices[choice];
}
function close() {
var el = document.getElementById('content');
el.style.visibility = 'hidden';
return false;
}
}
</script>
</head>
<body>
<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div id="content" class="content">
<div class="closebox"><a class="closebox-innr" id="x" href="#">Close</a></div>
<div class="maxbox"><div class="maxbox-innr"></div></div>
<h1 class="title">After Dark in CSS</h1>
<div class="ad"><img src="img/after-dark-icon.png" /></div>
<ul>
<li><a class="s" href="flying-toasters.html">Flying Toasters</a></li>
<li><a class="s" href="fish.html">Fish</a></li>
<li><a class="s" href="globe.html">Globe</a></li>
<li><a href="hard-rain.html">Hard Rain</a></li>
<li><a class="s" href="bouncing-ball.html">Bouncing Ball</a></li>
<li><a class="s" href="warp.html">Warp</a></li>
<li><a class="s" href="messages.html">Messages</a></li>
<li><a class="s" href="messages2.html">Messages 2</a></li>
<li><a href="fade-out.html" class="s">Fade Out</a></li>
<li><a class="s" href="logo.html">Logo</a></li>
<li><a class="s" href="rainstorm.html">Rainstorm</a></li>
<li><a class="s" href="spotlight.html">Spotlight</a></li>
<li><a id="randomizer" href="#">Randomizer</a></li>
</ul>
</div>
<footer class="footer">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="&quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</footer>
<div class="behind">
<a href="http://codepen.io/bryanbraun/pen/bojpu" class="clearfix"><div class="toaster"></div></a>
<p>Made by <a href="http://bryanbraun.com">Bryan</a></p>
</div>
</body>
</html>
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Logo | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
body {
background: #000;
}
/* ball styling */
img {
/* 145px x 54px */
display: block;
position: absolute;
/* ball animation */
-webkit-animation: moveX 5s linear 0s infinite alternate, moveY 6.3s linear 0s infinite alternate;
-moz-animation: moveX 5s linear 0s infinite alternate, moveY 6.3s linear 0s infinite alternate;
-o-animation: moveX 5s linear 0s infinite alternate, moveY 6.3s linear 0s infinite alternate;
animation: moveX 5s linear 0s infinite alternate, moveY 6.3s linear 0s infinite alternate ;
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of image */
from { left: 0; } to { left: calc(100% - 145px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 145px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 145px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 145px); }
}
@-webkit-keyframes moveY {
/* screen height - height of image */
from { top: calc(100% - 54px); } to { top: 0; }
}
@-moz-keyframes moveY {
from { top: calc(100% - 54px); } to { top: 0; }
}
@-o-keyframes moveY {
from { top: calc(100% - 54px); } to { top: 0; }
}
@keyframes moveY {
from { top: calc(100% - 54px); } to { top: 0; }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Logo Screensaver - After Dark in CSS</h1>
<img src="img/logo.png">
</body>
</html>
+68
View File
@@ -0,0 +1,68 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messages | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/**
* Thanks to @jonathonsampson for his demo at
* http://jsfiddle.net/jonathansampson/XxUXD/
*/
.message {
white-space: nowrap;
-webkit-animation: marquee 10s linear infinite, move 30s steps(3) infinite;
-moz-animation: marquee 10s linear infinite, move 30s steps(3) infinite;
-o-animation: marquee 10s linear infinite, move 30s steps(3) infinite;
animation: marquee 10s linear infinite, move 30s steps(3) infinite;
/* stylisitic */
font-size: 20px;
color: white;
position: absolute;
}
/* Marquee Animation */
@-webkit-keyframes marquee {
0% { text-indent: 100%; }
100% { text-indent: -150px; }
}
@-moz-keyframes marquee {
0% { text-indent: 100%; }
100% { text-indent: -150px; }
}
@-o-keyframes marquee {
0% { text-indent: 100%; }
100% { text-indent: -150px; }
}
@keyframes marquee {
0% { text-indent: 100%; }
100% { text-indent: -150px; }
}
/* Vertical Movement Animation */
@-webkit-keyframes move {
from { top: 20%; }
to { top: 100%; }
}
@-moz-keyframes move {
from { top: 20%; }
to { top: 100%; }
}
@-o-keyframes move {
from { top: 20%; }
to { top: 100%; }
}
@keyframes move {
from { top: 20%; }
to { top: 100%; }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Messages Screensaver - After Dark in CSS</h1>
<h2 class="message">OUT TO LUNCH</h2>
</body>
</html>
+57
View File
@@ -0,0 +1,57 @@
<!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: 462px;
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% - 460px); }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: calc(100% - 460px); }
}
@-o-keyframes moveX {
from { left: 0; } to { left: calc(100% - 460px); }
}
@keyframes moveX {
from { left: 0; } to { left: calc(100% - 460px); }
}
@-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">&nbsp;Why are you staring at my Macintosh?</h2>
</body>
</html>
+188
View File
@@ -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>
+66
View File
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotlight | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/**
* I really tried to get this one to work with CSS Masking (a la
* http://www.html5rocks.com/en/tutorials/masking/adobe/) but I
* was defeated. If you can figure out a way to do it, then let
* me know!
*/
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;
}
/* ball styling */
.spotlight {
position: absolute;
/* ball animation */
-webkit-animation: moveX 5s linear 0s infinite alternate, moveY 5.6s linear 0s infinite alternate;
-moz-animation: moveX 5s linear 0s infinite alternate, moveY 5.6s linear 0s infinite alternate;
-o-animation: moveX 5s linear 0s infinite alternate, moveY 5.6s linear 0s infinite alternate;
animation: moveX 5s linear 0s infinite alternate, moveY 5.6s linear 0s infinite alternate ;
}
/* animation keyframes */
@-webkit-keyframes moveX {
/* screen width - width of ball */
from { left: -2370px; } to { left: calc(100% - 2630px); }
}
@-moz-keyframes moveX {
from { left: -2370px; } to { left: calc(100% - 2630px); }
}
@-o-keyframes moveX {
from { left: -2370px; } to { left: calc(100% - 2630px); }
}
@keyframes moveX {
from { left: -2370px; } to { left: calc(100% - 2630px); }
}
@-webkit-keyframes moveY {
from { top: -1570px; } to { top: calc(100% - 1830px); }
}
@-moz-keyframes moveY {
from { top: -1570px; } to { top: calc(100% - 1830px); }
}
@-o-keyframes moveY {
from { top: -1570px; } to { top: calc(100% - 1830px); }
}
@keyframes moveY {
from { top: -1570px; } to { top: calc(100% - 1830px); }
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Spotlight Screensaver - After Dark in CSS</h1>
<!-- <b id="spotlight"></b> -->
<img class="spotlight" src="img/spotlight_bg.png" />
</body>
</html>
+260
View File
@@ -0,0 +1,260 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Warp | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/**
* Thanks to Keith Clark and his "starfield" demo:
* http://codepen.io/keithclark/pen/zqcEd
*/
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-animation: zoom 2s infinite;
-moz-animation: zoom 2s infinite;
-o-animation: zoom 2s infinite;
animation: zoom 2s infinite;
opacity: 0;
}
.stars:nth-child(1) {
background: url(img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.stars:nth-child(2) {
background: url(img/stars2.png) no-repeat center center fixed;
-webkit-animation-delay: 500ms;
-moz-animation-delay: 500ms;
-o-animation-delay: 500ms;
animation-delay: 500ms;
}
.stars:nth-child(3) {
background: url(img/stars3.png) no-repeat center center fixed;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.stars:nth-child(4) {
background: url(img/stars4.png) no-repeat center center fixed;
-webkit-animation-delay: 1500ms;
-moz-animation-delay: 1500ms;
-o-animation-delay: 1500ms;
animation-delay: 1500ms;
}
.stars:nth-child(5) {
background: url(img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.stars:nth-child(6) {
background: url(img/stars2.png) no-repeat center center fixed;
-webkit-animation-delay: 2500ms;
-moz-animation-delay: 2500ms;
-o-animation-delay: 2500ms;
animation-delay: 2500ms;
}
.stars:nth-child(7) {
background: url(img/stars3.png) no-repeat center center fixed;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.stars:nth-child(8) {
background: url(img/stars4.png) no-repeat center center fixed;
-webkit-animation-delay: 3500ms;
-moz-animation-delay: 3500ms;
-o-animation-delay: 3500ms;
animation-delay: 3500ms;
}
.stars:nth-child(9) {
background: url(img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
@-webkit-keyframes zoom {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5);
transform: scale(3.5);
}
}
@-moz-keyframes zoom {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5);
transform: scale(3.5);
}
}
@-o-keyframes zoom {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5);
transform: scale(3.5);
}
}
@keyframes zoom {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
50% {
opacity: 1;
}
85% {
opacity: 1;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5);
transform: scale(3.5);
}
}
</style>
</head>
<body>
<h1 class="visuallyhidden">Warp Screensaver - After Dark in CSS</h1>
<div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
<div class="stars"></div>
</div>
</body>
</html>