Skip to content

Instantly share code, notes, and snippets.

@pixleight

pixleight/dabblet.css

Created December 21, 2011 18:31
Show Gist options
  • Save pixleight/1507114 to your computer and use it in GitHub Desktop.
Save pixleight/1507114 to your computer and use it in GitHub Desktop.
Download ZIP
Webkit animation experiment
Raw
dabblet.css
/**
* Webkit animation experiment
*/
@-webkit-keyframes title {
0%,100% {
text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
50% {
text-shadow: 0 3px 5px rgba(0,183,229,0.5);
color: rgba(0,183,229,0.5);
}
}
@-webkit-keyframes spinner1 {
0% {
-webkit-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px #2187e7;
}
50% {
-webkit-transform:rotate(145deg);
opacity:1;
}
100% {
-webkit-transform:rotate(-360deg);
opacity:0;
}
}
@-webkit-keyframes spinner2 {
0%, 100% {
box-shadow: 0 0 0 #2187e7;
}
50% {
box-shadow: 0 0 15px #2187e7;
-webkit-transform: scale(1.1)
}
}
@-webkit-keyframes spinner3 {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body {
background: #334;
}
h1 {
text-align: center;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 40px;
color: rgba(255,255,255,0.5);
text-shadow: 0 0 5px rgba(255,255,255,0.5);
-webkit-animation: title 2s infinite ease-in-out;
}
.spinner1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-bottom:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:30px;
height:30px;
margin:0 auto 20px;
-webkit-animation: spinner1 1s infinite linear;
}
.spinner2 {
background-color: rgba(0,183,229,0.9);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto 20px;
-webkit-animation: spinner2 0.75s infinite ease-in-out;
}
.spinner3 {
width: 30px;
height: 30px;
background: #FFF;
border: 5px solid #FFF;
border-radius: 30px;
margin: 0 auto 50px;
}
.spinner3inner {
width: 0;
height: 0;
background: #FFF;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
border: 15px solid #000;
border-top: 15px solid rgba(0,0,0,0);
border-bottom: 15px solid rgba(0,0,0,0);
border-radius: 15px;
-webkit-animation: spinner3 0.8s infinite linear;
}
.box {
width: 200px;
height: 100px;
margin: 0 auto 20px;
cursor: pointer;
}
.box a {
display: block;
border: 5px solid rgba(0,183,229,1);
padding: 10px;
margin: 0 auto 20px;
color: #FFF;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 24px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 10px;
background: rgba(0,183,229,0.9);
box-shadow: 0 0 10px rgba(0,0,0,0.25) inset,
0 0 10px rgba(255,255,255,0.25);
-webkit-transition: all 0.75s;
}
.box:hover a {
transform: perspective(500px) rotateX(30deg) rotateY(30deg) rotateZ(340deg);
box-shadow: 0 0 10px rgba(255,255,255,0.25) inset,
0 0 10px rgba(0,0,0,0.75);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>Loading Icons:</h1>
<div class="spinner1"></div>
<div class="spinner2"></div>
<div class="spinner3">
<div class="spinner3inner"></div>
</div>
<div class="box">
<a href="#">Hover Me</a>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment