80 lines
1.2 KiB
CSS
80 lines
1.2 KiB
CSS
|
body {
|
||
|
|
background: #56c8d8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: absolute;
|
||
|
|
top: 45%;
|
||
|
|
left: 57.5%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.paddle, .player_two, .player_one {
|
||
|
|
height: 40px;
|
||
|
|
width: 3px;
|
||
|
|
background-color: white;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player_one {
|
||
|
|
left: -180px;
|
||
|
|
animation: movePaddleOne 4s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player_two {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|