Skip to content

Instantly share code, notes, and snippets.

/Test.markdown

Created April 23, 2014 16:54
Show Gist options
  • Save anonymous/11223358 to your computer and use it in GitHub Desktop.
Save anonymous/11223358 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Grisha.
Raw
index.html
<body>
<div id="sweet">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Raw
style.css
body {
background: url(http://assets.codepen.io/images/classy_fabric.png);
}
#sweet {
position: fixed;
margin: 0 45%;
top: 10em;
}
.intro {
background-color: #fff;
border: 2px dotted #f46;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
width: auto;
height: auto;
-webkit-animation: round 4.5s linear infinite;
animation: round 4.5s linear infinite;
transition: border-radius 0.3s linear;
}
.outro {
background-color: #1f1f24;
margin: 0px;
border: 5px solid #c16;
border-radius: 0px;
width: auto;
height: auto;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
-webkit-animation: rounddd 8s linear infinite;
animation: rounddd 8s linear infinite;
transition: border-radius 0.3s linear;
}
.intro:hover {
border-radius: 40%;
}
.outro:hover {
border-radius: 40%;
}
@-webkit-keyframes round {
0% {-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rounddd {
0% {-webkit-transform: rotate(0deg);;
transform: rotate(0deg);
}
100% {-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment