Skip to content

Instantly share code, notes, and snippets.

@sillero

sillero/dabblet.css

Created March 13, 2012 13:58
Show Gist options
  • Save sillero/2028932 to your computer and use it in GitHub Desktop.
Save sillero/2028932 to your computer and use it in GitHub Desktop.
Download ZIP
circular animation
Raw
dabblet.css
/**
* circular animation
*/
html {
background: #f06;
background: linear-gradient(45deg, #00f, yellow);
min-height:100%;
}
.testingA {
width: 500px;
height: 500px;
position: absolute;
left: 200px;
top: 200px;
animation: main-rotation 10s infinite linear;
}
.testingB, .testingC {
color: #eee;
text-align:center;
line-height: 200px;
width: 200px;
height: 200px;
background: #fff;
position: relative;
float: left;
opacity: 0.7;
font-size: 20px;
animation: balance-rotation 10s infinite linear, forced-perspective 10s infinite linear;
}
.testingC {
left: 100px;
}
@keyframes main-rotation {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes balance-rotation {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}
@keyframes forced-perspective {
0%,100% {
width: 200px;
height: 200px;
line-height: 200px;
font-size: 60px;
}
50% {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 12px;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="testingA">
<div class="testingB">
B
</div>
<div class="testingC">
C
</div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment