SCSS
$s : 7;
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;
}
