Skip to content

Instantly share code, notes, and snippets.

@xav76
Created Oct 24, 2012
Embed
What would you like to do?
A CodePen by Bennett Feely. Pick your Player - CSS3 animations, transforms, transitions, filters, the whole deal. And oh yeah, Spongebob.
<h1>Choose your character</h1>
<form>
<li>
<input name="r" type="radio" id="spongebob" />
<label>Spongebob</label>
</li>
<li>
<input name="r" type="radio" id="patrick" />
<label>Patrick</label>
</li>
<li>
<input name="r" type="radio" id="squidward" />
<label>Squidward</label>
</li>
<li>
<input name="r" type="radio" id="sandy" />
<label>Sandy</label>
</li>
<li>
<input name="r" type="radio" id="gary" />
<label>Gary</label>
</li>
</form>
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
input { display:block; appearance:none; }
*{ box-sizing:border-box; }
body { background-image:-webkit-radial-gradient(center, ellipse closest-corner, #fbfbfb 0%, #d2d2d2 100%); font-family: 'Gloria Hallelujah', sans-serif; text-align:center; }
form {
width:950px;
margin:0 auto;
}
h1 { display:inline-block; padding:20px 80px; font-size:2em; }
li { animation:flyin 3s 0.5s ease-out both infinite; list-style:none; float:left; color:transparent; transition:color 0.2s; }
li:nth-child(2) { animation-delay:0.8s; }
li:nth-child(3) { animation-delay:1.3s; }
li:nth-child(4) { animation-delay:1.6s; }
li:nth-child(5) { animation-delay:1.9s; }
@keyframes flyin {
0%,100%{ transform:translateY(0) }
50%{ transform:translateY(-10px); }
}
li:hover { color:#000; }
input {
display:block;
margin:15px 15px 0;
width:160px;
height:160px;
background-image:url(http://www.eposters.ie/images/FP1764_01.jpg);
border-radius:50%;
border:2px solid #222;
transition:0.2s ease;
opacity:0.5;
-webkit-filter:grayscale(1);
cursor:pointer;
}
input:hover, input:checked { opacity:1.5; -webkit-filter:grayscale(0); transform:translateY(-10px); box-shadow:0 10px 20px #ccc; }
input:checked { animation:float 1.1s ease-in-out infinite; border-radius:25%; }
@keyframes float { 0%,100%{ transform:translateY(-10px); } 50%{ transform:translateY(5px;); } }
input:checked ~ label { color:#000; }
#spongebob { background-position:415px 295px; }
#patrick { background-position:270px 350px; }
#squidward { background-position:348px 415px; }
#sandy { background-position:500px 360px; }
#gary { background-position:170px 235px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment