84 lines
1.2 KiB
SCSS
84 lines
1.2 KiB
SCSS
|
body {
|
||
|
|
background: #56c8d8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: absolute;
|
||
|
|
top: 45%;
|
||
|
|
left: 57.5%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.paddle{
|
||
|
|
height:40px;
|
||
|
|
width:3px;
|
||
|
|
background-color:white;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player_one{
|
||
|
|
@extend .paddle;
|
||
|
|
left:-180px;
|
||
|
|
animation: movePaddleOne 4s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player_two{
|
||
|
|
@extend .paddle;
|
||
|
|
left:20px;
|
||
|
|
animation: movePaddleTwo 4s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ball{
|
||
|
|
position:relative;
|
||
|
|
height:5px;
|
||
|
|
width:5px;
|
||
|
|
border-radius:50%;
|
||
|
|
background-color:white;
|
||
|
|
animation: moveBall 4s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes movePaddleOne{
|
||
|
|
0%, 100%{
|
||
|
|
transform:translate(0px, 100px);
|
||
|
|
}
|
||
|
|
25%{
|
||
|
|
transform:translate(0px, 0px);
|
||
|
|
}
|
||
|
|
50%{
|
||
|
|
transform:translate(0px, 0px);
|
||
|
|
}
|
||
|
|
75%{
|
||
|
|
transform:translate(0px, 100px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes movePaddleTwo{
|
||
|
|
0%, 100%{
|
||
|
|
transform:translate(0px,-50px);
|
||
|
|
}
|
||
|
|
25%{
|
||
|
|
transform:translate(0px,10px);
|
||
|
|
}
|
||
|
|
50%{
|
||
|
|
transform:translate(0px,0px);
|
||
|
|
}
|
||
|
|
75%{
|
||
|
|
transform:translate(0px,50px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveBall{
|
||
|
|
0%, 100%{
|
||
|
|
transform:translate(-180px, 30px);
|
||
|
|
}
|
||
|
|
25%{
|
||
|
|
transform:translate(18px, -25px);
|
||
|
|
}
|
||
|
|
50%{
|
||
|
|
transform:translate(-180px, -55px);
|
||
|
|
}
|
||
|
|
75%{
|
||
|
|
transform:translate(18px, 15px);
|
||
|
|
}
|
||
|
|
}
|