<div class="center">
<div class="apple"></div>
<div class="motto"></div>
</div>
$s : 7; // Change the element's size
body,html{background:#000}
.center{top:50%;left:50%;transform: translate(-50%, -50%);position:absolute;}
.apple, .motto{margin:0 auto}
.apple::before,
.motto::before{content:'';display:block;width:$s+px;height:$s+px;border-radius:50%;top:(-$s+px);left:(-$s+px);position:relative;}
.center:hover .apple::before,
.center:hover .motto::before{animation:move 100ms infinite}
@keyframes move{
0% {margin-left:0;-webkit-filter:grayscale(100%);border-radius:0}
33% {margin:2px 0 0 2px}
66% {margin:-2px 0 0 -2px}
100%{margin-left:0;-webkit-filter:grayscale(100%);border-radius:0}
}
.apple{width:19*$s+px;height:22*$s+px;}
.apple::before{
box-shadow:14*$s+px 1*$s+px #61bb46,12*$s+px 2*$s+px #61bb46,13*$s+px 2*$s+px #61bb46,14*$s+px 2*$s+px #61bb46,11*$s+px 3*$s+px #61bb46,12*$s+px 3*$s+px #61bb46,13*$s+px 3*$s+px #61bb46,10*$s+px 4*$s+px #61bb46,11*$s+px 4*$s+px #61bb46,12*$s+px 4*$s+px #61bb46,10*$s+px 5*$s+px #61bb46,5*$s+px 6*$s+px #61bb46,6*$s+px 6*$s+px #61bb46,7*$s+px 6*$s+px #61bb46,8*$s+px 6*$s+px #61bb46,13*$s+px 6*$s+px #61bb46,14*$s+px 6*$s+px #61bb46,15*$s+px 6*$s+px #61bb46,16*$s+px 6*$s+px #61bb46,3*$s+px 7*$s+px #61bb46,4*$s+px 7*$s+px #61bb46,5*$s+px 7*$s+px #61bb46,6*$s+px 7*$s+px #61bb46,7*$s+px 7*$s+px #61bb46,8*$s+px 7*$s+px #61bb46,9*$s+px 7*$s+px #61bb46,10*$s+px 7*$s+px #61bb46,11*$s+px 7*$s+px #61bb46,12*$s+px 7*$s+px #61bb46,13*$s+px 7*$s+px #61bb46,14*$s+px 7*$s+px #61bb46,15*$s+px 7*$s+px #61bb46,16*$s+px 7*$s+px #61bb46,17*$s+px 7*$s+px #61bb46,18*$s+px 7*$s+px #61bb46,2*$s+px 8*$s+px #fdb827,3*$s+px 8*$s+px #fdb827,4*$s+px 8*$s+px #fdb827,5*$s+px 8*$s+px #fdb827,6*$s+px 8*$s+px #fdb827,7*$s+px 8*$s+px #fdb827,8*$s+px 8*$s+px #fdb827,9*$s+px 8*$s+px #fdb827,10*$s+px 8*$s+px #fdb827,11*$s+px 8*$s+px #fdb827,12*$s+px 8*$s+px #fdb827,13*$s+px 8*$s+px #fdb827,14*$s+px 8*$s+px #fdb827,15*$s+px 8*$s+px #fdb827,16*$s+px 8*$s+px #fdb827,17*$s+px 8*$s+px #fdb827,18*$s+px 8*$s+px #fdb827,19*$s+px 8*$s+px #fdb827,2*$s+px 9*$s+px #fdb827,3*$s+px 9*$s+px #fdb827,4*$s+px 9*$s+px #fdb827,5*$s+px 9*$s+px #fdb827,6*$s+px 9*$s+px #fdb827,7*$s+px 9*$s+px #fdb827,8*$s+px 9*$s+px #fdb827,9*$s+px 9*$s+px #fdb827,10*$s+px 9*$s+px #fdb827,11*$s+px 9*$s+px #fdb827,12*$s+px 9*$s+px #fdb827,13*$s+px 9*$s+px #fdb827,14*$s+px 9*$s+px #fdb827,15*$s+px 9*$s+px #fdb827,16*$s+px 9*$s+px #fdb827,17*$s+px 9*$s+px #fdb827,18*$s+px 9*$s+px #fdb827,1*$s+px 10*$s+px #fdb827,2*$s+px 10*$s+px #fdb827,3*$s+px 10*$s+px #fdb827,4*$s+px 10*$s+px #fdb827,5*$s+px 10*$s+px #fdb827,6*$s+px 10*$s+px #fdb827,7*$s+px 10*$s+px #fdb827,8*$s+px 10*$s+px #fdb827,9*$s+px 10*$s+px #fdb827,10*$s+px 10*$s+px #fdb827,11*$s+px 10*$s+px #fdb827,12*$s+px 10*$s+px #fdb827,13*$s+px 10*$s+px #fdb827,14*$s+px 10*$s+px #fdb827,15*$s+px 10*$s+px #fdb827,16*$s+px 10*$s+px #fdb827,17*$s+px 10*$s+px #fdb827,1*$s+px 11*$s+px #f5821f,2*$s+px 11*$s+px #f5821f,3*$s+px 11*$s+px #f5821f,4*$s+px 11*$s+px #f5821f,5*$s+px 11*$s+px #f5821f,6*$s+px 11*$s+px #f5821f,7*$s+px 11*$s+px #f5821f,8*$s+px 11*$s+px #f5821f,9*$s+px 11*$s+px #f5821f,10*$s+px 11*$s+px #f5821f,11*$s+px 11*$s+px #f5821f,12*$s+px 11*$s+px #f5821f,13*$s+px 11*$s+px #f5821f,14*$s+px 11*$s+px #f5821f,15*$s+px 11*$s+px #f5821f,16*$s+px 11*$s+px #f5821f,1*$s+px 12*$s+px #f5821f,2*$s+px 12*$s+px #f5821f,3*$s+px 12*$s+px #f5821f,4*$s+px 12*$s+px #f5821f,5*$s+px 12*$s+px #f5821f,6*$s+px 12*$s+px #f5821f,7*$s+px 12*$s+px #f5821f,8*$s+px 12*$s+px #f5821f,9*$s+px 12*$s+px #f5821f,10*$s+px 12*$s+px #f5821f,11*$s+px 12*$s+px #f5821f,12*$s+px 12*$s+px #f5821f,13*$s+px 12*$s+px #f5821f,14*$s+px 12*$s+px #f5821f,15*$s+px 12*$s+px #f5821f,16*$s+px 12*$s+px #f5821f,1*$s+px 13*$s+px #f5821f,2*$s+px 13*$s+px #f5821f,3*$s+px 13*$s+px #f5821f,4*$s+px 13*$s+px #f5821f,5*$s+px 13*$s+px #f5821f,6*$s+px 13*$s+px #f5821f,7*$s+px 13*$s+px #f5821f,8*$s+px 13*$s+px #f5821f,9*$s+px 13*$s+px #f5821f,10*$s+px 13*$s+px #f5821f,11*$s+px 13*$s+px #f5821f,12*$s+px 13*$s+px #f5821f,13*$s+px 13*$s+px #f5821f,14*$s+px 13*$s+px #f5821f,15*$s+px 13*$s+px #f5821f,16*$s+px 13*$s+px #f5821f,1*$s+px 14*$s+px #e03a3e,2*$s+px 14*$s+px #e03a3e,3*$s+px 14*$s+px #e03a3e,4*$s+px 14*$s+px #e03a3e,5*$s+px 14*$s+px #e03a3e,6*$s+px 14*$s+px #e03a3e,7*$s+px 14*$s+px #e03a3e,8*$s+px 14*$s+px #e03a3e,9*$s+px 14*$s+px #e03a3e,10*$s+px 14*$s+px #e03a3e,11*$s+px 14*$s+px #e03a3e,12*$s+px 14*$s+px #e03a3e,13*$s+px 14*$s+px #e03a3e,14*$s+px 14*$s+px #e03a3e,15*$s+px 14*$s+px #e03a3e,16*$s+px 14*$s+px #e03a3e,1*$s+px 15*$s+px #e03a3e,2*$s+px 15*$s+px #e03a3e,3*$s+px 15*$s+px #e03a3e,4*$s+px 15*$s+px #e03a3e,5*$s+px 15*$s+px #e03a3e,6*$s+px 15*$s+px #e03a3e,7*$s+px 15*$s+px #e03a3e,8*$s+px 15*$s+px #e03a3e,9*$s+px 15*$s+px #e03a3e,10*$s+px 15*$s+px #e03a3e,11*$s+px 15*$s+px #e03a3e,12*$s+px 15*$s+px #e03a3e,13*$s+px 15*$s+px #e03a3e,14*$s+px 15*$s+px #e03a3e,15*$s+px 15*$s+px #e03a3e,16*$s+px 15*$s+px #e03a3e,17*$s+px 15*$s+px #e03a3e,1*$s+px 16*$s+px #e03a3e,2*$s+px 16*$s+px #e03a3e,3*$s+px 16*$s+px #e03a3e,4*$s+px 16*$s+px #e03a3e,5*$s+px 16*$s+px #e03a3e,6*$s+px 16*$s+px #e03a3e,7*$s+px 16*$s+px #e03a3e,8*$s+px 16*$s+px #e03a3e,9*$s+px 16*$s+px #e03a3e,10*$s+px 16*$s+px #e03a3e,11*$s+px 16*$s+px #e03a3e,12*$s+px 16*$s+px #e03a3e,13*$s+px 16*$s+px #e03a3e,14*$s+px 16*$s+px #e03a3e,15*$s+px 16*$s+px #e03a3e,16*$s+px 16*$s+px #e03a3e,17*$s+px 16*$s+px #e03a3e,18*$s+px 16*$s+px #e03a3e,2*$s+px 17*$s+px #963d97,3*$s+px 17*$s+px #963d97,4*$s+px 17*$s+px #963d97,5*$s+px 17*$s+px #963d97,6*$s+px 17*$s+px #963d97,7*$s+px 17*$s+px #963d97,8*$s+px 17*$s+px #963d97,9*$s+px 17*$s+px #963d97,10*$s+px 17*$s+px #963d97,11*$s+px 17*$s+px #963d97,12*$s+px 17*$s+px #963d97,13*$s+px 17*$s+px #963d97,14*$s+px 17*$s+px #963d97,15*$s+px 17*$s+px #963d97,16*$s+px 17*$s+px #963d97,17*$s+px 17*$s+px #963d97,18*$s+px 17*$s+px #963d97,19*$s+px 17*$s+px #963d97,2*$s+px 18*$s+px #963d97,3*$s+px 18*$s+px #963d97,4*$s+px 18*$s+px #963d97,5*$s+px 18*$s+px #963d97,6*$s+px 18*$s+px #963d97,7*$s+px 18*$s+px #963d97,8*$s+px 18*$s+px #963d97,9*$s+px 18*$s+px #963d97,10*$s+px 18*$s+px #963d97,11*$s+px 18*$s+px #963d97,12*$s+px 18*$s+px #963d97,13*$s+px 18*$s+px #963d97,14*$s+px 18*$s+px #963d97,15*$s+px 18*$s+px #963d97,16*$s+px 18*$s+px #963d97,17*$s+px 18*$s+px #963d97,18*$s+px 18*$s+px #963d97,19*$s+px 18*$s+px #963d97,3*$s+px 19*$s+px #963d97,4*$s+px 19*$s+px #963d97,5*$s+px 19*$s+px #963d97,6*$s+px 19*$s+px #963d97,7*$s+px 19*$s+px #963d97,8*$s+px 19*$s+px #963d97,9*$s+px 19*$s+px #963d97,10*$s+px 19*$s+px #963d97,11*$s+px 19*$s+px #963d97,12*$s+px 19*$s+px #963d97,13*$s+px 19*$s+px #963d97,14*$s+px 19*$s+px #963d97,15*$s+px 19*$s+px #963d97,16*$s+px 19*$s+px #963d97,17*$s+px 19*$s+px #963d97,18*$s+px 19*$s+px #963d97,4*$s+px 20*$s+px #009ddc,5*$s+px 20*$s+px #009ddc,6*$s+px 20*$s+px #009ddc,7*$s+px 20*$s+px #009ddc,8*$s+px 20*$s+px #009ddc,9*$s+px 20*$s+px #009ddc,10*$s+px 20*$s+px #009ddc,11*$s+px 20*$s+px #009ddc,12*$s+px 20*$s+px #009ddc,13*$s+px 20*$s+px #009ddc,14*$s+px 20*$s+px #009ddc,15*$s+px 20*$s+px #009ddc,16*$s+px 20*$s+px #009ddc,17*$s+px 20*$s+px #009ddc,5*$s+px 21*$s+px #009ddc,6*$s+px 21*$s+px #009ddc,7*$s+px 21*$s+px #009ddc,8*$s+px 21*$s+px #009ddc,9*$s+px 21*$s+px #009ddc,10*$s+px 21*$s+px #009ddc,11*$s+px 21*$s+px #009ddc,12*$s+px 21*$s+px #009ddc,13*$s+px 21*$s+px #009ddc,14*$s+px 21*$s+px #009ddc,15*$s+px 21*$s+px #009ddc,16*$s+px 21*$s+px #009ddc,6*$s+px 22*$s+px #009ddc,7*$s+px 22*$s+px #009ddc,8*$s+px 22*$s+px #009ddc,13*$s+px 22*$s+px #009ddc,14*$s+px 22*$s+px #009ddc,15*$s+px 22*$s+px #009ddc;
}
.motto{width:63*$s+px;height:5*$s+px;margin-top:$s*5+px;}
.motto::before{
box-shadow:1*$s+px 1*$s+px #ffffff,2*$s+px 1*$s+px #ffffff,3*$s+px 1*$s+px #ffffff,4*$s+px 1*$s+px #ffffff,6*$s+px 1*$s+px #ffffff,9*$s+px 1*$s+px #ffffff,11*$s+px 1*$s+px #ffffff,13*$s+px 1*$s+px #ffffff,16*$s+px 1*$s+px #ffffff,18*$s+px 1*$s+px #ffffff,21*$s+px 1*$s+px #ffffff,25*$s+px 1*$s+px #ffffff,26*$s+px 1*$s+px #ffffff,27*$s+px 1*$s+px #ffffff,30*$s+px 1*$s+px #ffffff,32*$s+px 1*$s+px #ffffff,33*$s+px 1*$s+px #ffffff,34*$s+px 1*$s+px #ffffff,36*$s+px 1*$s+px #ffffff,37*$s+px 1*$s+px #ffffff,38*$s+px 1*$s+px #ffffff,40*$s+px 1*$s+px #ffffff,41*$s+px 1*$s+px #ffffff,42*$s+px 1*$s+px #ffffff,44*$s+px 1*$s+px #ffffff,45*$s+px 1*$s+px #ffffff,46*$s+px 1*$s+px #ffffff,49*$s+px 1*$s+px #ffffff,50*$s+px 1*$s+px #ffffff,51*$s+px 1*$s+px #ffffff,53*$s+px 1*$s+px #ffffff,56*$s+px 1*$s+px #ffffff,58*$s+px 1*$s+px #ffffff,59*$s+px 1*$s+px #ffffff,60*$s+px 1*$s+px #ffffff,61*$s+px 1*$s+px #ffffff,3*$s+px 2*$s+px #ffffff,6*$s+px 2*$s+px #ffffff,9*$s+px 2*$s+px #ffffff,11*$s+px 2*$s+px #ffffff,13*$s+px 2*$s+px #ffffff,16*$s+px 2*$s+px #ffffff,18*$s+px 2*$s+px #ffffff,20*$s+px 2*$s+px #ffffff,25*$s+px 2*$s+px #ffffff,28*$s+px 2*$s+px #ffffff,30*$s+px 2*$s+px #ffffff,32*$s+px 2*$s+px #ffffff,36*$s+px 2*$s+px #ffffff,40*$s+px 2*$s+px #ffffff,44*$s+px 2*$s+px #ffffff,47*$s+px 2*$s+px #ffffff,49*$s+px 2*$s+px #ffffff,53*$s+px 2*$s+px #ffffff,56*$s+px 2*$s+px #ffffff,59*$s+px 2*$s+px #ffffff,3*$s+px 3*$s+px #ffffff,6*$s+px 3*$s+px #ffffff,7*$s+px 3*$s+px #ffffff,8*$s+px 3*$s+px #ffffff,9*$s+px 3*$s+px #ffffff,11*$s+px 3*$s+px #ffffff,13*$s+px 3*$s+px #ffffff,14*$s+px 3*$s+px #ffffff,16*$s+px 3*$s+px #ffffff,18*$s+px 3*$s+px #ffffff,19*$s+px 3*$s+px #ffffff,25*$s+px 3*$s+px #ffffff,28*$s+px 3*$s+px #ffffff,30*$s+px 3*$s+px #ffffff,32*$s+px 3*$s+px #ffffff,33*$s+px 3*$s+px #ffffff,34*$s+px 3*$s+px #ffffff,36*$s+px 3*$s+px #ffffff,37*$s+px 3*$s+px #ffffff,38*$s+px 3*$s+px #ffffff,40*$s+px 3*$s+px #ffffff,41*$s+px 3*$s+px #ffffff,42*$s+px 3*$s+px #ffffff,44*$s+px 3*$s+px #ffffff,45*$s+px 3*$s+px #ffffff,46*$s+px 3*$s+px #ffffff,47*$s+px 3*$s+px #ffffff,49*$s+px 3*$s+px #ffffff,50*$s+px 3*$s+px #ffffff,51*$s+px 3*$s+px #ffffff,53*$s+px 3*$s+px #ffffff,54*$s+px 3*$s+px #ffffff,56*$s+px 3*$s+px #ffffff,59*$s+px 3*$s+px #ffffff,3*$s+px 4*$s+px #ffffff,6*$s+px 4*$s+px #ffffff,9*$s+px 4*$s+px #ffffff,11*$s+px 4*$s+px #ffffff,13*$s+px 4*$s+px #ffffff,15*$s+px 4*$s+px #ffffff,16*$s+px 4*$s+px #ffffff,18*$s+px 4*$s+px #ffffff,20*$s+px 4*$s+px #ffffff,25*$s+px 4*$s+px #ffffff,28*$s+px 4*$s+px #ffffff,30*$s+px 4*$s+px #ffffff,32*$s+px 4*$s+px #ffffff,36*$s+px 4*$s+px #ffffff,40*$s+px 4*$s+px #ffffff,44*$s+px 4*$s+px #ffffff,46*$s+px 4*$s+px #ffffff,49*$s+px 4*$s+px #ffffff,53*$s+px 4*$s+px #ffffff,55*$s+px 4*$s+px #ffffff,56*$s+px 4*$s+px #ffffff,59*$s+px 4*$s+px #ffffff,3*$s+px 5*$s+px #ffffff,6*$s+px 5*$s+px #ffffff,9*$s+px 5*$s+px #ffffff,11*$s+px 5*$s+px #ffffff,13*$s+px 5*$s+px #ffffff,16*$s+px 5*$s+px #ffffff,18*$s+px 5*$s+px #ffffff,21*$s+px 5*$s+px #ffffff,25*$s+px 5*$s+px #ffffff,26*$s+px 5*$s+px #ffffff,27*$s+px 5*$s+px #ffffff,30*$s+px 5*$s+px #ffffff,32*$s+px 5*$s+px #ffffff,36*$s+px 5*$s+px #ffffff,40*$s+px 5*$s+px #ffffff,41*$s+px 5*$s+px #ffffff,42*$s+px 5*$s+px #ffffff,44*$s+px 5*$s+px #ffffff,47*$s+px 5*$s+px #ffffff,49*$s+px 5*$s+px #ffffff,50*$s+px 5*$s+px #ffffff,51*$s+px 5*$s+px #ffffff,53*$s+px 5*$s+px #ffffff,56*$s+px 5*$s+px #ffffff,59*$s+px 5*$s+px #ffffff,63*$s+px 5*$s+px #ffffff;
}
View Compiled
/*
Hover for a little extra.
Remix of Nikolay's http://dribbble.com/shots/1270858-8-bit-Apple-logo
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.