opacity-dots

_.md

[ Launch: color-dots ] 800890328ff44f3c59f0 by ptvans
[ 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

config.json

{"description":"opacity-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/vmv14o4.gif","fullscreen":false,"ajax-caching":true}

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>

inlet.js

{}

style.css

#container {
	width: 1062px;
  	overflow: hidden;
  padding:40px;
}

.sq {
position: relative;
display: inline-block;
margin: 8px;
/*background-color: rgba(69,10,159,0.5);*/
  border-radius: 50%;
  border: 2px dashed rgba(250,250,250,0.5);
-webkit-box-shadow: 0px 1px 3px rgba(20,20,20,0.5) inset;
opacity: 0.7;
  -webkit-transition: all 0.1s;
}


.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;*/
    	opacity: 0.75;
    	transform: translate3d(1px,1px,1px)  ;}
    to {
    	/*background-color: #e2b959;*/
    	opacity: 1.0;
    	transform: translate3d(1px,1px,1px) ;}
}

.sq01 {
  height: 30px;
width: 30px;
  background-color: rgba(284,10,29,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 300ms;
}

.sq02 {
  height: 20px;
width: 20px;
  background-color: rgba(173,10,145,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 500ms;
}

.sq03 {
  height: 10px;
width: 10px;
  background-color: rgba(69,10,159,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 5000ms;
}


/* 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;*/