Skip to content

Instantly share code, notes, and snippets.

@ptvans

ptvans/_.md

Created August 8, 2014 19:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ptvans/fcafcea36f379d04908b to your computer and use it in GitHub Desktop.
Save ptvans/fcafcea36f379d04908b to your computer and use it in GitHub Desktop.
Download ZIP
color-dots
Raw
_.md

[ Launch: wiggle-dots ] fcafcea36f379d04908b by ptvans
[ Launch: octopus-suckers ] 4f88524eafbc049f146c by ptvans
[ Launch: octopus-suckers ] e8e13f3d2b5ad77db3b4 by ptvans
[ Launch: octopus-suckers ] 90b6886f85c697058bc2 by ptvans
[ Launch: squares-colorshift-shape ] 81a19397da4fcc536753 by ptvans
[ Launch: squares-colorshift-shape ] 8b00c9d77212bc006270 by ptvans
[ Launch: squares-colorshift-shape ] 2e08f822fcb14c0c28cd by ptvans
[ Launch: squares-colorshift ] 7efba581d119fbb725ae by ptvans
[ Launch: squares ] 7542a276afd923a85985 by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

Raw
config.json
{"description":"color-dots","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/R7x4UP3.gif","fullscreen":false,"ajax-caching":true}
Raw
index.html
<div id="container">
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="clear:both;"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
<div class="sq hover sq01"></div>
<div class="sq hover sq02"></div>
<div class="sq hover sq03"></div>
</div>
Raw
style.css
#container {
width: 1062px;
overflow: hidden;
padding:40px;
}
.sq {
position: relative;
display: inline-block;
margin: 8px;
background-color: rgba(255,255,255,0.5);
height: 30px;
width: 30px;
border-radius: 50%;
-webkit-box-shadow: 0px 1px 3px rgba(20,20,20,0.5);
opacity: 0.8;
border: 10px solid rgba(255,255,255,0.5);
-webkit-transition: all 0.3s;
}
.sq:hover {
transform: translate3d(1px,1px,1px) rotateX(-20deg) rotateY(20deg) scaleZ(10.0);
}
/*color*/
.sq {
-webkit-animation: colorshift ease-in-out infinite alternate; /* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes colorshift {
from {
background-color: #cc9922;
transform: translate3d(1px,1px,1px) ;}
to {
background-color: #ecd191;
transform: translate3d(1px,1px,1px) ;}
}
.sq01 {
-webkit-animation-delay: 500ms;
-webkit-animation-duration: 5ms;
}
.sq02 {
-webkit-animation-delay: 500ms;
-webkit-animation-duration: 50ms;
}
.sq03 {
-webkit-animation-delay: 500ms;
-webkit-animation-duration: 2000ms;
}
/* Standard syntax
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment