Skip to content

Instantly share code, notes, and snippets.

@Acconut

Acconut/dabblet.css

Created May 2, 2012 13:03
Show Gist options
  • Save Acconut/2576382 to your computer and use it in GitHub Desktop.
Save Acconut/2576382 to your computer and use it in GitHub Desktop.
Download ZIP
/
Raw
dabblet.css
/*
*
*/
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
#container {
width:184px;
height:184px;
background-position: center center;
background-size: 48px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,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);
}
#warped {
animation-name: rotation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center center;
position: relative;
display: block;
width:184px;
height:184px;
}
#warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
transform-origin:50% 100%; }
#warped span{font-family:;font-size:19px;font-weight:regular;font-style:normal;
line-height:0.6; white-space:pre; overflow:visible; padding:0px;}
#warped .w0 { transform: rotate(0.06rad); width: 12px; height: 11px; left:
89.23px; top: 34.11px;}
#warped .w1 { transform: rotate(0.28rad); width: 8px; height: 11px; left:
101.06px; top: 35.85px;}
#warped .w2 { transform: rotate(0.49rad); width: 12px; height: 11px; left:
108.3px; top: 39.62px;}
#warped .w3 { transform: rotate(0.68rad); width: 6px; height: 11px; left:
118.76px; top: 44.62px;}
#warped .w4 { transform: rotate(0.87rad); width: 12px; height: 11px; left:
122.14px; top: 50.95px;}
#warped .w5 { transform: rotate(1.06rad); width: 6px; height: 11px; left:
130.2px; top: 58.38px;}
#warped .w6 { transform: rotate(1.26rad); width: 12px; height: 11px; left:
130.75px; top: 66.64px;}
#warped .w7 { transform: rotate(1.45rad); width: 6px; height: 11px; left:
135.66px; top: 75.42px;}
#warped .w8 { transform: rotate(1.59rad); width: 7px; height: 11px; left:
135.49px; top: 81.9px;}
#warped .w9 { transform: rotate(1.77rad); width: 10px; height: 11px; left:
133.06px; top: 90.34px;}
#warped .w10 { transform: rotate(1.95rad); width: 7px; height: 11px; left:
132.12px; top: 98.47px;}
#warped .w11 { transform: rotate(2.15rad); width: 12px; height: 11px;
left: 125.23px; top: 106.88px;}
#warped .w12 { transform: rotate(2.36rad); width: 8px; height: 11px; left:
120.88px; top: 114.58px;}
#warped .w13 { transform: rotate(2.57rad); width: 12px; height: 11px;
left: 111.04px; top: 120.76px;}
#warped .w14 { transform: rotate(2.77rad); width: 6px; height: 11px; left:
106.02px; top: 124.8px;}
#warped .w15 { transform: rotate(2.96rad); width: 12px; height: 11px;
left: 94.37px; top: 127.24px;}
#warped .w16 { transform: rotate(3.15rad); width: 6px; height: 11px; left:
88.41px; top: 127.99px;}
#warped .w17 { transform: rotate(3.34rad); width: 12px; height: 11px;
left: 76.48px; top: 127.02px;}
#warped .w18 { transform: rotate(3.53rad); width: 6px; height: 11px; left:
70.89px; top: 124.37px;}
#warped .w19 { transform: rotate(3.67rad); width: 7px; height: 11px; left:
64.59px; top: 121.46px;}
#warped .w20 { transform: rotate(3.85rad); width: 10px; height: 11px;
left: 56.2px; top: 116.5px;}
#warped .w21 { transform: rotate(4.03rad); width: 7px; height: 11px; left:
51.81px; top: 110.38px;}
#warped .w22 { transform: rotate(4.23rad); width: 12px; height: 11px;
left: 44.16px; top: 102.42px;}
#warped .w23 { transform: rotate(4.45rad); width: 8px; height: 11px; left:
42.58px; top: 93.1px;}
#warped .w24 { transform: rotate(4.66rad); width: 12px; height: 11px;
left: 39.05px; top: 83.24px;}
#warped .w25 { transform: rotate(4.85rad); width: 6px; height: 11px; left:
42.48px; top: 74.26px;}
#warped .w26 { transform: rotate(5.04rad); width: 12px; height: 11px;
left: 41.61px; top: 65.53px;}
#warped .w27 { transform: rotate(5.23rad); width: 6px; height: 11px; left:
48.37px; top: 57.37px;}
#warped .w28 { transform: rotate(5.43rad); width: 12px; height: 11px;
left: 50.6px; top: 50.07px;}
#warped .w29 { transform: rotate(5.62rad); width: 6px; height: 11px; left:
60.14px; top: 43.9px;}
#warped .w30 { transform: rotate(5.76rad); width: 7px; height: 11px; left:
65.03px; top: 40.27px;}
#warped .w31 { transform: rotate(5.94rad); width: 10px; height: 11px;
left: 71.23px; top: 36.72px;}
#warped .w32 { transform: rotate(12.29rad); width: 16px; height: 12px;
left: 173.36px; top: 130.73px;}
#warped .w33 { transform: rotate(12.54rad); width: 10px; height: 12px;
left: 188.2px; top: 129px;}
#warped .w34 { transform: rotate(12.69rad); width: 6px; height: 12px;
left: 197.18px; top: 129.4px;}
#warped .w35 { transform: rotate(12.84rad); width: 10px; height: 12px;
left: 202.03px; top: 130.84px;}
#warped .w36 { transform: rotate(12.98rad); width: 5px; height: 12px;
left: 210.63px; top: 133.07px;}
#warped .w37 { transform: rotate(13.07rad); width: 5px; height: 12px;
left: 214.21px; top: 134.85px;}
#warped .w38 { transform: rotate(13.17rad); width: 7px; height: 12px;
left: 217.45px; top: 137.49px;}
#warped .w39 { transform: rotate(13.27rad); width: 4px; height: 12px;
left: 222.51px; top: 140.25px;}
#warped .w40 { transform: rotate(13.36rad); width: 7px; height: 12px;
left: 224.29px; top: 143.33px;}
p {
text-align: center;
width:184px;
}
Raw
dabblet.html
<div id='container'>
<div id='warped'>
<span class='w0'>T</span><span class='w1'>r</span><span class='w2'>o</span><span class='w3'>l</span><span class='w4'>o</span><span class='w5'>l</span><span class='w6'>o</span><span class='w7'>l</span><span class='w8'> </span><span class='w9'>•</span><span class='w10'> </span><span class='w11'>T</span><span class='w12'>r</span><span class='w13'>o</span><span class='w14'>l</span><span class='w15'>o</span><span class='w16'>l</span><span class='w17'>o</span><span class='w18'>l</span><span class='w19'> </span><span class='w20'>•</span><span class='w21'> </span><span class='w22'>T</span><span class='w23'>r</span><span class='w24'>o</span><span class='w25'>l</span><span class='w26'>o</span><span class='w27'>l</span><span class='w28'>o</span><span class='w29'>l</span><span class='w30'> </span><span class='w31'>•</span>
</div>
</div>
<p>
Text generated with <a href="http://csswarp.eleqtriq.com/" target="_blank">CSSWARP</a>. Thanks!
</p>
Raw
settings.json
{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment