<h1>CH<div class="oo"><div class="ball"></div></div>SE</h1>
@import url(http://fonts.googleapis.com/css?family=Raleway:900);
body {
background-color: #fefefe;
}
h1 {
font-family: Raleway;
text-align: center;
font-size: 80px;
color: #363836;
}
.oo {
display: inline-block;
width: 120px;
height: 60px;
border-radius: 50px;
background-color: #363836;
}
.ball {
height: 40px;
width: 40px;
border-radius: 50px;
background-color: #fefefe;
margin: 10px;
animation: switch 2s infinite alternate;
animation: switch 2s infinite alternate;
animation: switch 2s infinite alternate;
}
@-webkit-keyframes switch {
100% { transform: translate(60px,0px); }
}
@-moz-keyframes switch {
100% { transform: translate(60px,0px); }
}
@-o-keyframes switch {
100% { transform: translate(60px,0px); }
}
@keyframes switch {
100% { transform: translate(60px,0px); }
}
xxxxxxxxxx
// inspired by http://drbl.in/osdh