Skip to content

Instantly share code, notes, and snippets.

@mturjak

mturjak/SassMeister-input-HTML.html

Created December 11, 2013 18:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mturjak/7915896 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mturjak/7915896 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="tcounter">
<ul class="roto10 h10">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 h">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
/
<div class="tcounter">
<ul class="roto6 m6">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 m">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
/
<div class="tcounter">
<ul class="roto6 s6">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 s">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$lh: 40px;
$th: 10;
.tcounter {
display: inline-block;
position: relative;
height: $lh;
width: $lh / 2;
/*overflow: hidden;*/
}
ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: -2.25 * $lh;
width: 5 * $lh;
height: 5 * $lh;
}
li {
position: absolute;
left: 2.25 * $lh;
font-size: $lh - 2px;
line-height: $lh;
height: 5 * $lh;
}
@mixin rotator($r) {
$ang: 360deg / $r;
@for $i from 0 through ($r - 1) {
$tf: 'rotate(' + ($i * (- $ang) - 90deg) + ')';
.roto#{$r} .a#{$i} {
-webkit-transform: #{$tf};
}
}
@-webkit-keyframes roto#{$r} {
@for $i from 1 through $r {
#{$i * 100% / $r} {
-webkit-transform: rotate($i * $ang);
}
}
}
}
@include rotator(10);
@include rotator(6);
.roto10.s {
-webkit-animation: roto10 10s /*steps(1,end)*/ infinite;
}
.roto6.s6 {
-webkit-animation: roto6 60s infinite;
}
.roto10.m {
-webkit-animation: roto10 600s infinite;
}
.roto6.m6 {
-webkit-animation: roto6 3600s infinite;
}
.roto10.h {
-webkit-animation: roto10 36000s infinite;
}
.roto10.h10 {
-webkit-animation: roto10 360000s infinite;
}
.tcounter li > span {
display:block;
-webkit-transform: rotate(90deg);
}
Raw
SassMeister-output.css
.tcounter {
display: inline-block;
position: relative;
height: 40px;
width: 20px;
/*overflow: hidden;*/
}
ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: -90px;
width: 200px;
height: 200px;
}
li {
position: absolute;
left: 90px;
font-size: 38px;
line-height: 40px;
height: 200px;
}
.roto10 .a0 {
-webkit-transform: rotate(-90deg);
}
.roto10 .a1 {
-webkit-transform: rotate(-126deg);
}
.roto10 .a2 {
-webkit-transform: rotate(-162deg);
}
.roto10 .a3 {
-webkit-transform: rotate(-198deg);
}
.roto10 .a4 {
-webkit-transform: rotate(-234deg);
}
.roto10 .a5 {
-webkit-transform: rotate(-270deg);
}
.roto10 .a6 {
-webkit-transform: rotate(-306deg);
}
.roto10 .a7 {
-webkit-transform: rotate(-342deg);
}
.roto10 .a8 {
-webkit-transform: rotate(-378deg);
}
.roto10 .a9 {
-webkit-transform: rotate(-414deg);
}
@-webkit-keyframes roto10 {
10% {
-webkit-transform: rotate(36deg);
}
20% {
-webkit-transform: rotate(72deg);
}
30% {
-webkit-transform: rotate(108deg);
}
40% {
-webkit-transform: rotate(144deg);
}
50% {
-webkit-transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(216deg);
}
70% {
-webkit-transform: rotate(252deg);
}
80% {
-webkit-transform: rotate(288deg);
}
90% {
-webkit-transform: rotate(324deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.roto6 .a0 {
-webkit-transform: rotate(-90deg);
}
.roto6 .a1 {
-webkit-transform: rotate(-150deg);
}
.roto6 .a2 {
-webkit-transform: rotate(-210deg);
}
.roto6 .a3 {
-webkit-transform: rotate(-270deg);
}
.roto6 .a4 {
-webkit-transform: rotate(-330deg);
}
.roto6 .a5 {
-webkit-transform: rotate(-390deg);
}
@-webkit-keyframes roto6 {
16.66667% {
-webkit-transform: rotate(60deg);
}
33.33333% {
-webkit-transform: rotate(120deg);
}
50% {
-webkit-transform: rotate(180deg);
}
66.66667% {
-webkit-transform: rotate(240deg);
}
83.33333% {
-webkit-transform: rotate(300deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.roto10.s {
-webkit-animation: roto10 10s infinite;
}
.roto6.s6 {
-webkit-animation: roto6 60s infinite;
}
.roto10.m {
-webkit-animation: roto10 600s infinite;
}
.roto6.m6 {
-webkit-animation: roto6 3600s infinite;
}
.roto10.h {
-webkit-animation: roto10 36000s infinite;
}
.roto10.h10 {
-webkit-animation: roto10 360000s infinite;
}
.tcounter li > span {
display: block;
-webkit-transform: rotate(90deg);
}
Raw
SassMeister-rendered.html
<div class="tcounter">
<ul class="roto10 h10">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 h">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
/
<div class="tcounter">
<ul class="roto6 m6">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 m">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
/
<div class="tcounter">
<ul class="roto6 s6">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
</ul>
</div>
<div class="tcounter">
<ul class="roto10 s">
<li class="a0"><span>0</span></li>
<li class="a1"><span>1</span></li>
<li class="a2"><span>2</span></li>
<li class="a3"><span>3</span></li>
<li class="a4"><span>4</span></li>
<li class="a5"><span>5</span></li>
<li class="a6"><span>6</span></li>
<li class="a7"><span>7</span></li>
<li class="a8"><span>8</span></li>
<li class="a9"><span>9</span></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment