pupils

_.md

[ Launch: pupils ] f1ab16ad33f36b1838e6 by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"pupils","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},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

index.html

<div class="pupil"></div>
<div class="pupil"></div>
<div class="pupil"></div>
<div class="pupil"></div>

<div id="lamp">
<input type="radio" name="switch" value="on" />
<input type="radio" name="switch" value="off" checked="checked"/>
<label for="switch" class="entypo-play"></label>
</div>

inlet.js

{}

style.css

/*https://d3hv8qdd474bjn.cloudfront.net/cardboarder_small.jpg
https://d3hv8qdd474bjn.cloudfront.net/narwhal_small.jpg
https://d3hv8qdd474bjn.cloudfront.net/nyancat_small.jpg
https://d3hv8qdd474bjn.cloudfront.net/animal_bobcat_small.jpg
https://d3hv8qdd474bjn.cloudfront.net/god_small.jpg*/

@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.pupil {
    position: absolute;
    top: 100px;
  left: 100px;
	height: 16px;
  width: 16px;
  background-color: red;
  border-radius: 50%;
  /*-webkit-animation: bounce 3s ease-in-out infinite alternate;*/

}




.pupil::after {
	content: '';
  display: block;
  position: absolute;
  top: 18px;
  left: -5px;
  border-radius: 2px;
  border: 2px solid #fff;
	height: 22px;
  	width: 22px;
  background-size: 100%;
  -webkit-box-shadow: (20,20,20,0.5)
}

@-webkit-keyframes bounce {
  0% {
  	transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(75px, 0px);
  }
  100% {
    transform: translate(100px, 25px);
  }
}




.pupil:nth-child(1) {
	top: 150px;
  left: 300px;
}
.pupil:nth-child(2) {
	top: 200px;
  left: 80px
}
.pupil:nth-child(3){
	top: 180px;
  left: 50px
}
.pupil:nth-child(4) {
	top: 140px;
  left: 200px;
}


.pupil:nth-child(1)::after {
    background-image: url('https://d3hv8qdd474bjn.cloudfront.net/god_small.jpg');
}
.pupil:nth-child(2)::after {
    background-image: url('https://d3hv8qdd474bjn.cloudfront.net/cardboarder_small.jpg');
}
.pupil:nth-child(3)::after {
    background-image: url('https://d3hv8qdd474bjn.cloudfront.net/animal_bobcat_small.jpg');
}
.pupil:nth-child(4)::after {
    background-image: url('https://d3hv8qdd474bjn.cloudfront.net/nyancat_small.jpg');
}




input[name="switch"], input[name="switch"] + label {
  position:absolute;
  bottom:3rem;
  width:5rem;
  height:5rem;
}
input[name="switch"] + label {right:3rem;}
input[name="switch"] {
  opacity:0;
  z-index:9;
  cursor:pointer;
}
input[value="on"] {
  right:3rem;
}
input[value="off"] {
  right:-4rem;
}
input[name="switch"] + label {
  text-align:center;
}
[class*="entypo-"]::before {
  line-height:4rem;
  font-size:2.5rem;
  color:rgba(5,5,255,0.6);
  font-family:'entypo', sans-serif;
}
input[value="on"]:checked {
  right:-4rem;
}
input[value="on"]:checked + input[value="off"] {
  right:3rem;
}


input[value="on"]:checked ~ .pupil {
    -webkit-animation: bounce 3s ease-in-out infinite alternate;
}