Skip to content

Instantly share code, notes, and snippets.

@rmarsch

rmarsch/orbfountain.html

Created April 11, 2013 22:04
Show Gist options
  • Save rmarsch/5367576 to your computer and use it in GitHub Desktop.
Save rmarsch/5367576 to your computer and use it in GitHub Desktop.
Download ZIP
Orb Fountain
Raw
orbfountain.html
<!DOCTYPE html>
<html>
<head>
<title>Orb Fountain</title>
<meta charset="UTF-8" />
<style type="text/css">
* { font-family: Verdana, Arial, sans-serif; }
body { background-color: #000; cursor: default; }
h1 { font-size: 15pt; }
p { font-size: 10pt; }
div.box {
display: inline-block;
background-color: #110;
position: absolute;
bottom: 0px;
transition: all 5s;
border: 1px solid #000;
width: 100px;
height: 100px;
box-shadow: 0px 0px 10px #700 inset;
border-radius: 50px;
animation: glowing 1.8s infinite;
-webkit-animation: glowing 1.8s infinite;
}
div.box:hover {
background-color: #fff;
box-shadow: 0px 0px 50px #00f inset;
margin-bottom:500px;
transition: all 0.01s;
animation: none;
-webkit-animation: none;
}
@keyframes glowing {
0% { background-color: #110; bow-shadow: 0px 0px 10px #700 inset; }
50% { background-color: #1d1000; bow-shadow: 0px 0px 50px #900 inset;}
100% { background-color: #110; bow-shadow: 0px 0px 10px #700 inset; }
}
@-webkit-keyframes glowing {
0% { background-color: #110; bow-shadow: 0px 0px 10px #700 inset; }
50% { background-color: #1d1000; bow-shadow: 0px 0px 50px #900 inset;}
100% { background-color: #110; bow-shadow: 0px 0px 10px #700 inset; }
}
</style>
</head>
<body>
<div class="box" style="left:0px"></div>
<div class="box" style="left: 102px"></div>
<div class="box" style="left: 204px"></div>
<div class="box" style="left: 306px"></div>
<div class="box" style="left: 408px"></div>
<div class="box" style="left: 510px"></div>
<div class="box" style="left: 612px"></div>
<div class="box" style="left: 714px;"></div>
<div class="box" style="left: 816px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment