SCSS
@import "compass/css3";
body {
background: #e74c3c;
}
.square{
width: 75px;
height:75px;
position: absolute;
right:50%;
top:50%;
margin-top:-35px;
margin-right:-35px;
@include transform(rotate(45deg));
}
.square i{
width: 124px;
height: 124px;
background: rgba(255,255,255,0.3);
position: absolute;
&:nth-child(1){
left:0;
top: 0;
animation:square1 2.2s ease-in-out infinite;
}
&:nth-child(2){
right:0;
top: 0;
animation:square2 2.2s ease-in-out infinite;
}
&:nth-child(3){
right:0;
bottom: 0;
animation:square3 2.2s ease-in-out infinite;
}
&:nth-child(4){
left:0;
bottom: 0;
animation:square4 2.2s ease-in-out infinite;
}
}
@keyframes square1{
25%{transform:translate(-55px,-55px);}
85%{transform:translate(-55px,-55px);}
100%{transform:translate(0,0) rotate(90deg);}
}
@keyframes square2{
25%{transform:translate(55px,-55px);}
85%{transform:translate(55px,-55px);}
100%{transform:translate(0,0) rotate(90deg);}
}
@keyframes square3{
25%{transform:translate(55px,55px);}
85%{transform:translate(55px,55px);}
100%{transform:translate(0,0) rotate(90deg);}
}
@keyframes square4{
25%{transform:translate(-55px,55px);}
85%{transform:translate(-55px,55px);}
100%{transform:translate(0,0) rotate(90deg);}
}
