A Pen by Adam Doherty.

Circle-Illusion.markdown

Circle Illusion

A Pen by Adam Doherty on CodePen.

License.

index.html

<div id="text"><h1>The Circle Illusion</h1>
  <p>You may not believe it at first, but all of the white circles are travelling in straight lines.</p>
</div>
<div class="centerButton"><button id="showhide">Show/Hide Lines</button></div>

<div class="bigCircle center">
  <img id="lines" style="visibility: hidden;" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/lines.png"></img>
  <div class="circleContainer a"><div class="smallCircle circleA"></div></div>
  <div class="circleContainer b"><div class="smallCircle circleB"></div></div>
  <div class="circleContainer c"><div class="smallCircle circleC"></div></div>
  <div class="circleContainer d"><div class="smallCircle circleD"></div></div>
  <div class="circleContainer e"><div class="smallCircle circleE"></div></div>
  <div class="circleContainer f"><div class="smallCircle circleF"></div></div>
  <div class="circleContainer g"><div class="smallCircle circleG"></div></div>
  <div class="circleContainer h"><div class="smallCircle circleH"></div></div>
</div>

script.js

$('#showhide').click(function(){
  if ( $('#lines').css('visibility') == 'hidden' )
    $('#lines').css('visibility','visible');
  else
    $('#lines').css('visibility','hidden');
});

style.css

html, body{
    margin: 0;
    padding: 0;
}

body{
  background-color: black;
  color: white;
  font-family: verdana;
  margin: 10px;
}

h1{
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 10px;
}

p{
  margin-bottom: 10px;
}

#text{
  text-align: center;
}

.centerButton{
  text-align: center;
}

.center {
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -204.5px;
   margin-top: -204.5px;
}

.bigCircle{
  width: 409px;
  height: 409px;
  background-color: #ba0000;
  border-radius: 50%;
}

.smallCircle{
  background-color: white;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  position: absolute;
}

.circleContainer {
    height: 410px;
    left: 192px;
    position: absolute;
    top: 0;
    width: 27px;
}

.a {

}

.b{
	transform: rotate(22.5deg);
}

.c{
	transform: rotate(45deg);
}

.d{
	transform: rotate(67.5deg);
}

.e{
	transform: rotate(90deg);
}

.f{
	transform: rotate(112.5deg);
}

.g{
	transform: rotate(135deg);
}

.h{
	transform: rotate(157.5deg);
}

.circleA, .circleB, .circleC, .circleD, .circleE, .circleF, .circleG, .circleH{
	animation: circle 8s ease-in-out infinite;
} 

.circleA{
  animation-delay: -5s;
}

.circleB {
	animation-delay: -4.5s;
}

.circleC{
	animation-delay: -4s;
}

.circleD{
	animation-delay: -3.5s;
}

.circleE{
	animation-delay: -3s;
}

.circleF{
	animation-delay: -2.5s;
}

.circleG{
	animation-delay: -2s;
}

.circleH{
	animation-delay: -1.5s;
}

@keyframes circle
{
	0%	{top: 0px;}
	50%	{top: 382px;}
	100%{top: 0px;}
}