Skip to content

Instantly share code, notes, and snippets.

@icebeat

icebeat/dabblet.css

Created January 10, 2013 17:11
Show Gist options
  • Save icebeat/4503910 to your computer and use it in GitHub Desktop.
Save icebeat/4503910 to your computer and use it in GitHub Desktop.
Download ZIP
Test
Raw
dabblet.css
/**
* Test
*/
div {
border-radius: 25px;
background: #298FF3;
width: 50px;
height: 50px;
position:relative;
overflow: hidden;
-webkit-transform-style: preserve-3d; -webkit-perspective: 500px;
animation: 2800ms rotate steps(1) infinite;
}
i {
display: none;
border-radius: 25px;
background: pink;
width: 50px;
height: 50px;
/*animation: 5s colors steps(1) infinite;*/
}
span {
background: rgba(0,0,0,.1);
position: absolute;
display:block;
width: 50px;
height: 25px;
border-radius: 25px 25px 0 0;
-webkit-transform-origin: 0% 100%;
transform: rotateX(0deg);
animation: 700ms flip linear infinite;
}
@keyframes flip {
from {
transform: rotateX(0deg);
background: rgba(0,0,0,0);
}
50% {
background: rgba(0,0,0,.15);
}
to {
transform: rotateX(-180deg);
background: rgba(0,0,0,0);
}
}
@keyframes colors {
25% { background:linear-gradient(left, #C8000F 50%, #FFAF00 50%); }
50% { background:pink;}
75% { background:yellow;}
}
@keyframes rotate1 {
0% { background: linear-gradient(top, #E94848 50%, #E94848 50%); transform: rotateZ(0deg); }
14% { background: linear-gradient(top, #F5AF33 50%, #E94848 50%); }
28% { background: linear-gradient(top, #F5AF33 50%, #F5AF33 50%); }
32% { background: linear-gradient(top, #4D9B54 50%, #F5AF33 50%); }
56% { background: linear-gradient(top, #4D9B54 50%, #4D9B54 50%); }
70% { background: linear-gradient(top, #298FF3 50%, #4D9B54 50%); }
84% { background: linear-gradient(top, #298FF3 50%, #298FF3 50%); }
100% { background: linear-gradient(top, #E94848 50%, #298FF3 50%); transform: rotateZ(-360deg); }
25% { transform: rotateZ(-90deg); } 50% { transform: rotateZ(-180deg); }
75% { transform: rotateZ(-270deg); }
}
@keyframes rotate {
0% { transform: rotateZ(0deg); }
25% { transform: rotateZ(90deg); }
50% { transform: rotateZ(180deg); }
75% { transform: rotateZ(270deg); }
100% { transform: rotateZ(360deg); }
}
@keyframes pound {
50% { transform: scale(.5); opacity: 1; }
}
.circle {
opacity:1;
background: #298FF3;
width: 30px;
height: 30px;
border-radius: 15px;
display: inline-block;
animation: pound .75s infinite;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div><i></i><span></span></div>
<br>
<b class="circle"></b>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment