Skip to content

Instantly share code, notes, and snippets.

@CodeDotJS

CodeDotJS/index.html

Created December 8, 2014 14:18
Show Gist options
  • Save CodeDotJS/4321c4d0785debf1c9c4 to your computer and use it in GitHub Desktop.
Save CodeDotJS/4321c4d0785debf1c9c4 to your computer and use it in GitHub Desktop.
Download ZIP
yyepPW
Raw
index.html
<body>
<div class="git"><a href="https://rishi.pavakpaul.in"><img src="forkme.png" alt="" ></a></div>
<div class="drop-container"><div></div></div><div class="drop-container1"><div></div></div>
<div class="drop-container2"><div></div></div><div class="drop-container3"><div></div></div>
<div class="drop-container4"><div></div></div><div class="drop-container5"><div></div></div>
<div class="drop-container6"><div></div></div><div class="drop-container7"><div></div></div>
<div class="drop-container8"><div></div></div><div class="drop-container9"><div></div></div>
<div class="drop-container10"><div></div></div><div class="drop-container11"><div></div></div>
<div class="drop-container12"><div></div></div><div class="drop-container13"><div></div></div>
<div class="drop-container14"><div></div></div><div class="drop-container15"><div></div></div>
<div class="drop-container16"><div></div></div><div class="drop-container17"><div></div></div>
<div class="drop-container18"><div></div></div><div class="drop-container19"><div></div></div>
<div class="drop-container20"><div></div></div><div class="drop-container21"><div></div></div>
<div class="drop-container22"><div></div></div><div class="drop-container23"><div></div></div>
<div class="drop-container24"><div></div></div><div class="drop-container25"><div></div></div>
<div class="drop-container26"><div></div></div><div class="drop-container27"><div></div></div>
<div class="drop-container28"><div></div></div><div class="drop-container29"><div></div></div>
<div class="drop-container30"><div></div></div><div class="drop-container31"><div></div></div>
<div class="drop-container32"><div></div></div><div class="drop-container33"><div></div></div>
<div class="drop-container34"><div></div></div><div class="drop-container35"><div></div></div>
<div class="drop-container36"><div></div></div><div class="drop-container37"><div></div></div>
<div class="drop-container38"><div></div></div><div class="drop-container39"><div></div></div>
<div class="drop-container40"><div></div></div><div class="drop-container41"><div></div></div>
<div class="drop-container42"><div></div></div><div class="drop-container43"><div></div></div>
<div class="drop-container44"><div></div></div><div class="drop-container45"><div></div></div>
<div class="drop-container46"><div></div></div><div class="drop-container47"><div></div></div>
<div class="drop-container48"><div></div></div><div class="drop-container49"><div></div></div></div></body>
Raw
style.css
body
{
background-color:black;
}
.drop-container
{
position: relative;
}.drop-container35 div{
position:absolute;
top: 80px;
left: 62%;
background:cyan;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 4s infinite ease;
box-shadow:white 0px 0px 50px;
}.drop-container36 div{
position:absolute;
top: 80px;
left: 64%;
background:red;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 3s infinite ease;
box-shadow:white 0px 0px 50px;
}.drop-container37 div{
position:absolute;
top: 80px;
left: 66%;
background:yellow;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 2s infinite ease;
box-shadow:white 0px 0px 50px;
}.drop-container38 div{
position:absolute;
top: 80px;
left: 68%;
background:darkorange;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 4s infinite ease;
box-shadow:white 0px 0px 50px;
}.drop-container39 div{
position:absolute;
top: 80px;
left: 70%;
background:cyan;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 3s infinite ease;
box-shadow:white 0px 0px 50px;
}.drop-container40 div{
position:absolute;
top: 80px;
left: 72%;
background:red;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 2s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container41 div{
position:absolute;
top: 80px;
left: 74%;
background:yellow;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 4s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container42 div{
position:absolute;
top: 80px;
left: 76%;
background:darkorange;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 3s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container43 div{
position:absolute;
top: 80px;
left: 78%;
background:cyan;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 2s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container44 div{
position:absolute;
top: 80px;
left: 80%;
background:red;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 4s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container45 div{
position:absolute;
top: 80px;
left: 82%;
background:yellow;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 3s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container46 div{
position:absolute;
top: 80px;
left: 84%;
background:darkorange;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 2s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container47 div{
position:absolute;
top: 80px;
left: 86%;
background:cyan;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 4s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container48 div{
position:absolute;
top: 80px;
left: 88%;
background:red;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 3s infinite ease;
box-shadow:white 0px 0px 50px;
}
.drop-container49 div{
position:absolute;
top: 80px;
left: 90%;
background:yellow;
transform:rotate(135deg);
border-radius:50%;
margin-left: -1px;
width: 2px;
height:2px;
animation: drop 2s infinite ease;
box-shadow:white 0px 0px 50px;
}
@keyframes drop{
10%{
height: 10px;
width: 20px;
}
25%{
top: 480px;
margin-left: -500px;
height:30px;
width:30px;
border-radius:100px 100px 100px 110px;
}
50%{
top:50px;
margin-left: -400px;
height:30px;
width:30px;
}
100%{
margin-left:-50px;
top:500px;
height: 5px;
width: 5px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment