<input type="radio" name="return" class="clear-start" id="start" /><span>Start</span>
<br />
<br />
<input type="radio" name="return" class="in-play clear-start hl" id="serve-left" /><span>SL</span>
<input type="radio" name="return" class="in-play clear-start hr rscb" id="serve-right" /><span>SR</span>
<br />
<br />
<input type="radio" name="return" class="in-play clear-start hl hlh hit-left-left" id="ls-hit-left-left" /><span>HLL</span>
<input type="radio" name="return" class="in-play clear-start hr hrh hit-right-right" id="ls-hit-right-right" /><span>HRR</span>
<input type="radio" name="return" class="in-play clear-start hr hrh ha hit-left-right-2" id="ls-hit-left-right-2" /><span>HLR2</span>
<input type="radio" name="return" class="in-play clear-start hl hlh ha hit-right-left-2" id="ls-hit-right-left-2" /><span>HRL2</span>
<br />
<input type="radio" name="return" class="in-play clear-start hl hit-right-left" id="ls-hit-right-left" /><span>HRL</span>
<input type="radio" name="return" class="in-play clear-start hr ha hit-left-right" id="ls-hit-left-right" /><span>HLR</span>
<input type="radio" name="return" class="in-play clear-start hl hlh hit-right-left-3" id="ls-hit-right-left-3" /><span>HRL3</span>
<input type="radio" name="return" class="in-play clear-start hr hrh ha hit-left-right-3" id="ls-hit-left-right-3" /><span>HRL3</span>
<br />
<br />
<input type="radio" name="return" class="in-play clear-start hl hlh hit-left-left rscb" id="rs-hit-left-left" /><span>HLL</span>
<input type="radio" name="return" class="in-play clear-start hr hrh hit-right-right rscb" id="rs-hit-right-right" /><span>HRR</span>
<input type="radio" name="return" class="in-play clear-start hr hrh ha hit-left-right-2 rscb" id="rs-hit-left-right-2" /><span>HLR2</span>
<input type="radio" name="return" class="in-play clear-start hl hlh ha hit-right-left-2 rscb" id="rs-hit-right-left-2" /><span>HRL2</span>
<br />
<input type="radio" name="return" class="in-play clear-start hl hit-right-left rscb" id="rs-hit-right-left" /><span>HRL</span>
<input type="radio" name="return" class="in-play clear-start hr ha hit-left-right rscb" id="rs-hit-left-right" /><span>HLR</span>
<input type="radio" name="return" class="in-play clear-start hl hlh ha hit-right-left-3 rscb" id="rs-hit-right-left-3" /><span>HRL3</span>
<input type="radio" name="return" class="in-play clear-start hr hrh hit-left-right-3 rscb" id="rs-hit-left-right-3" /><span>HLR3</span>
<br />
<br />
<input type="radio" name="return" class="in-play clear-start" id="win-left" /><span>WINL</span>
<input type="radio" name="return" class="in-play clear-start" id="win-right" /><span>WINR</span>
<br />
<br />
<input type="radio" name="return" id="miss-left" /><span>ML</span>
<input type="radio" name="return" id="miss-right" /><span>MR</span>
<div>
<div>
<player1>
<u>
<u>
<u></u><u></u>
</u>
<u>
<u></u><u>
<bat></bat>
</u><u></u><u></u>
<ball></ball>
</u>
</u>
</player1>
<div class="table">
</div>
<ball></ball>
<player2>
<u>
<u>
<u></u><u></u>
</u>
<u>
<ball></ball>
<u></u><u>
<bat></bat>
</u><u></u><u></u>
</u>
</u>
</player2>
</div>
<winoverlay></winoverlay>
<label class="ll" for="win-left" title="Return"></label>
<label class="lr" for="win-right" title="Return"></label>
<!--right start-->
<label class="rs lr r4" for="rs-hit-right-right" title="Return right"></label>
<label class="rs ll l4" for="rs-hit-left-right-3" title="Return left"></label>
<label class="rs lr r3" for="rs-hit-right-left-3" title="Return right"></label>
<label class="rs ll l3" for="rs-hit-left-right-2" title="Return left"></label>
<label class="rs ll l2" for="rs-hit-left-left" title="Return left"></label>
<label class="rs lr r2" for="rs-hit-right-left-2" title="Return right"></label>
<label class="rs ll l1" for="rs-hit-left-right" title="Return left"></label>
<label class="rs lr r1" for="rs-hit-right-left" title="Return right"></label>
<!--left start-->
<label class="ls ll l4" for="ls-hit-left-left" title="Return left"></label>
<label class="ls lr r4" for="ls-hit-right-left-3" title="Return right"></label>
<label class="ls ll l3" for="ls-hit-left-right-3" title="Return left"></label>
<label class="ls lr r3" for="ls-hit-right-left-2" title="Return right"></label>
<label class="ls lr r2" for="ls-hit-right-right" title="Return right"></label>
<label class="ls ll l2" for="ls-hit-left-right-2" title="Return left"></label>
<label class="ls lr r1" for="ls-hit-right-left" title="Return right"></label>
<label class="ls ll l1" for="ls-hit-left-right" title="Return left"></label>
<label class="ll ml" for="miss-left" title="Return left"></label>
<label class="lr mr" for="miss-right" title="Return right"></label>
<label class="ll" for="serve-left" title="Serve left"></label>
<label class="lr" for="serve-right" title="Serve right"></label>
<dialog1>
<div>
<p>Welcome to</p>
<h1>Go to <br /> line tennis</h1>
</div>
<player1>
<u>
<u>
<u></u><u></u>
</u>
<u>
<u></u><u>
<bat></bat>
</u><u></u><u></u>
</u>
</u>
</player1>
<div>
<h2>Can you beat your evil twin?</h2>
<label for="start">I'm ready!</label>
<p>Tap for them to serve</p>
<br />
<small>Version: 0.32</small>
</div>
</dialog1>
<dialog2>
<h2>Argh!<br /> That's a shame.</h2>
<player1>
<u>
<u>
<u></u><u></u>
</u>
<u>
<u></u><u>
<bat></bat>
</u><u></u><u></u>
</u>
</u>
</player1>
<div>
<h3>It's a miss!</h3>
<label for="start">Try again</label>
</div>
</dialog2>
<dialog3>
<h2>A win!</h2>
<player1>
<u>
<u>
<u></u><u></u>
</u>
<u>
<u></u><u>
<bat></bat>
</u><u></u><u></u>
</u>
</u>
</player1>
<confetti>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
</confetti>
<div>
<br />
<h3>Congratulations! You have beaten your evil twin. No doubt your greatest achievement ever.</h3>
<label for="start">Play again?</label>
</div>
</dialog3>
<a href="https://tinydesign.co.uk/" title="Ben Evans Portfolio">
<sig><u></u></sig>
</a>
</div>
$blk: #000;
$none: rgba(#fff,0);
$white: #fff;
$line: #222E35;
$red: #EF476F;
$yellow: #FFD166;
$green: #06D6A0;
$dblue: #073B4C;
$lblue: #118AB2;
$lw: .5rem;
$movespeed: .2s;
$shot-time: .4s;
$shot-time-delay: 1.4s;
$shot-time-hard: .3s;
$shot-time-hard-delay: 1.5s;
html {
font-size: 1vh;
}
body {
margin: 0;
background: $dblue;
font-family: 'Consolas';
color: $blk;
& > div {
width: 56rem;
max-width: 100%;
height: 100rem;
margin: auto;
position: absolute;
overflow: hidden;
background: lighten($lblue,20);
left: 0;
right: 0;
top: 0;
display: flex;
& > div {
width: 100%;
height: 100%;
transform: translate3d(0,-8rem,0) scale(.9);
}
}
div > div, sig, player1 {
*:not(label), *:before, *:after {
box-sizing: border-box;
position: absolute;
content: '';
left: 0;
top: 0;
}
}
}
.table {
width: 30rem;
height: 30rem;
border: $lw solid $line;
bottom: 0;
right: 0;
margin: auto;
background: linear-gradient(90deg,$white 14rem,$line 14rem,$line 14.5rem,$white 14.5rem);
box-shadow: 0 10rem 0 rgba($line,.1);
//legs
&:before {
height: 12rem;
border-left: $lw solid $line;
border-right: $lw solid $line;
width: 28rem;
transform: translate3d(.5rem,29.5rem,0);
}
//net
&:after {
border: $lw solid $line;
height: 4rem;
width: 32rem;
transform: translate3d(-1.5rem,11rem,0);
background: repeating-linear-gradient(45deg, $none, $none .5rem, $line .5rem, $line .8rem ), //
repeating-linear-gradient(-45deg, $none, $none .5rem, $line .5rem, $line .8rem );
}
}
ball,
player1 > u > u:nth-of-type(2) u:nth-of-type(3):before,
player2 > u > u:nth-of-type(2) u:nth-of-type(3):before {
width: 2rem;
height: 2rem;
transform: translate3d(31rem,50rem,0);
background: $white;
border: $lw solid $line !important;
border-radius: 50%;
opacity: 0;
}
body > div > label {
height: 100%;
width: 50%;
cursor: pointer;
position: absolute;
top: 0;
font-size: 3rem;
&:after {
padding: .5rem;
background: #fff;
transform: translate3d(1rem, 30rem,0);
position: absolute;
top: 0;
left: 0;
}
&:before {
content: '';
border-radius: 1rem;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
&:hover:before {
background: rgba(#fff,.05);
}
}
.ll {
left: 0;
}
.lr {
right: 0;
}
dialog1, dialog2, dialog3 {
position: absolute;
left: 0;
top: 0;
}
dialog1, dialog2, dialog3 {
/* display: none !important;*/
width: 100%;
height: 100%;
text-align: center;
font-size: 3rem;
background: $green;
background: linear-gradient( $green,$lblue);
display: block;
padding: 4rem;
box-sizing: border-box;
transition: all .5s .5s cubic-bezier(0.02, 0.47, 0.53, 1.32);
letter-spacing: -.025em;
h1 {
line-height: 1em;
}
player1 {
position: relative;
transform: none;
height: 28rem;
display: block;
width: 2rem;
margin: auto;
}
label {
background: $blk;
display: inline-block;
color: $white;
padding: 1rem 2rem;
}
label {
cursor: pointer;
&:hover {
background: $dblue;
}
}
}
dialog2 {
transform: translate3d(0,-100%,0);
background: linear-gradient(rgba($red,.3),rgba(lighten($red,10),.9)), $dblue;
padding: 6rem 4rem;
}
dialog3 {
transform: translate3d(0,-100%,0);
}
@keyframes remove-overlay {
100% {
transform: translate3d(0,-100%,0);
}
}
.clear-start:checked ~ div > dialog1 {
transform: translate3d(0,-100%,0);
}
#miss-left:checked, #miss-right:checked, {
~ div > dialog2 {
transform: translate3d(0,0,0);
}
}
#miss-right:checked ~ div > .mr:before, #miss-left:checked ~ div > .ml:before {
box-shadow: inset 0 0 20rem rgba($red,.5);
-webkit-mask-image: linear-gradient($none, #fff,#fff);
}
#serve-left:checked,
#serve-right:checked {
~ div > dialog2 {
animation: miss-delay .25s 2.5s linear forwards;
}
}
@keyframes miss-delay {
100% {
transform: translate3d(0,0,0);
}
}
@keyframes miss-delay2 {
100% {
transform: translate3d(0,0,0);
}
}
#ls-hit-left-right:checked,
#ls-hit-left-right-2:checked,
#ls-hit-right-left-2:checked,
#ls-hit-right-left-3:checked,
#rs-hit-right-left:checked,
#rs-hit-right-left-2:checked,
#rs-hit-left-right-2:checked,
#rs-hit-left-right-3:checked,
{
~ div > dialog2 {
animation: miss-delay2 .25s 2.5s linear forwards;
}
}
#ls-hit-right-left:checked,
#ls-hit-right-right:checked,
#ls-hit-left-right-3:checked,
#ls-hit-left-left:checked,
#rs-hit-left-right:checked,
#rs-hit-left-left:checked,
#rs-hit-right-left-3:checked,
#rs-hit-right-right:checked {
~ div > dialog2 {
animation: miss-delay .25s 2.5s linear forwards;
}
}
input {
margin: .5rem .5rem .5rem 1rem;
transform: translate3d(0,.25rem,0);
+ span {
color: $lblue;
font-size: .9rem;
}
}
@media (max-width: 1250px) {
input, input + span {
display: none;
}
}
.in-play:checked {
// no more serves
~ div > [for="serve-left"], ~ div > [for="serve-right"] {
display: none;
}
}
small {
font-size: 1.5rem;
}
#win-left:checked ~ div, #win-right:checked ~ div {
> dialog3 {
animation: miss-delay .5s 5s linear forwards;
}
}
sig {
&, * {
height: 9.25em;
overflow: hidden;
border-radius: .5em;
}
position: absolute;
right: 1rem;
bottom: 1rem;
font-size: .5rem;
color: $blk;
width: 10em;
transform: skewX(10deg) scaleY(.45) rotate(2deg);
&:before, *:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5em;
height: 5em;
background: currentColor;
transform: translate3d(-2.5em,0,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor;
border-radius: .5em 2em .5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em,0,0) scaleY(.95);
display: block !important;
&:before {
transform: translate3d(-3em,-2em,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: .5em;
}
}
}
a:hover, a:focus {
sig {
color: $white;
}
}
// patterns
@keyframes movemiss {
0%,100% {
transform: scale(0);
}
}
@keyframes movemiss2 {
0%,100% {
transform: scale(0);
}
}
.hl:checked ~ div > .ml, .hr:checked ~ div > .mr {
animation: movemiss $shot-time $shot-time-delay linear;
}
.hlh:checked ~ div > .ml, .hrh:checked ~ div > .mr {
animation: movemiss $shot-time-hard $shot-time-hard-delay linear;
}
#ls-hit-right-left:checked ~ div > {
.l1 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#ls-hit-left-right-2:checked ~ div > {
.r1 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#ls-hit-right-right:checked ~ div > {
.r2, .r1, .mr {
animation: movemiss2 $shot-time $shot-time-delay linear;
}
}
#ls-hit-right-left-2:checked ~ div > {
.l1, .l2 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#ls-hit-left-right-3:checked ~ div > {
.r1, .r2, .r3 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#ls-hit-right-left-3:checked ~ div > {
.l1, .l2, .l3 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#ls-hit-left-left:checked ~ div > {
.l1, .l2, .l3, .l4, .ml {
animation: movemiss2 $shot-time $shot-time-delay linear;
}
}
//right start
.rscb:checked ~ div > {
.ls {
display: none;
}
}
#rs-hit-left-right:checked ~ div > {
.r1 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#rs-hit-right-left-2:checked ~ div > {
.l1 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#rs-hit-left-left:checked ~ div > {
.l2, .l1, .ml {
animation: movemiss2 $shot-time $shot-time-delay linear;
}
}
#rs-hit-left-right-2:checked ~ div > {
.r1, .r2 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#rs-hit-right-left-3:checked ~ div > {
.l1, .l2, .l3 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#rs-hit-left-right-3:checked ~ div > {
.r1, .r2, .r3 {
animation: movemiss $shot-time $shot-time-delay linear;
}
}
#rs-hit-right-right:checked ~ div > {
.r1, .r2, .r3, .r4, .mr {
animation: movemiss2 $shot-time $shot-time-delay linear;
}
}
player1, player2 {
transform: translate3d(40rem,5rem,0);
& > u {
&:after {
width: 12rem;
height: 5rem;
background: rgba($line,.1);
border-radius: 50%;
transform: translate3d(-4rem, 20rem, 0);
}
ball {
transform: translate3d(-10rem,1rem,0);
opacity: 0;
@keyframes serveball2 {
49%,100% {
transform: translate3d(-10rem,1rem,0);
opacity: 0;
}
50% {
opacity: 1;
}
75% {
transform: translate3d(-10rem,-10rem,0);
opacity: 1;
}
}
}
& > u:nth-of-type(2) {
animation: standby 2s infinite;
height: 10rem;
//bat
bat {
width: 1.5rem;
height: 4.5rem;
border-radius: .5rem;
background: $yellow;
border: $lw solid $line;
transform: translate3d(6rem, -3rem, 0) rotate(80deg);
&:before {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: $red;
border: $lw solid $line;
transform: translate3d(-2.25rem,-3rem,0);
}
}
//head
u:nth-of-type(4) {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: $yellow;
border: $lw solid $line;
transform: translate3d(-2rem,1rem,0);
&:before {
width: $lw;
height: $lw;
background: $line;
border-radius: 50%;
transform: translate3d(1rem,2rem,0);
box-shadow: 1.2rem 0 0 $line;
animation: blink 6s infinite;
}
@keyframes blink {
70%, 74% {
transform: translate3d(1rem,2rem,0)
}
72% {
transform: translate3d(1rem,2rem,0) scaleY(0)
}
}
}
//body
u:nth-of-type(1) {
width: 10rem;
height: 10rem;
border-radius: 50%;
background: $red;
border: $lw solid $line;
transform: translate3d(-3.5rem,5rem,0);
}
// left arm
u:nth-of-type(2) {
border-style: hidden;
border-left: $lw solid $line;
border-top: $lw solid $line;
width: 6rem;
height: 6rem;
transform: translate3d(-2.3rem, 1.4rem, 0) rotate(200deg);
border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
transform-origin: 0 100%;
@keyframes serve-left {
70% {
transform: translate3d(-1rem,1rem,0) rotate(280deg);
}
}
}
//right arm
u:nth-of-type(3) {
border-style: hidden;
border-top: $lw solid $line;
border-right: $lw solid $line;
width: 8rem;
height: 8rem;
transform: translate3d(4.3rem, 6rem, 0) rotate(13deg);
border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
transform-origin: 0 0;
&:before {
transform: translate3d(5rem,8rem,0);
}
@keyframes serve {
50% {
transform: translate3d(4rem,6rem,0) rotate(150deg);
}
}
@keyframes serveball {
49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
}
}
& > u:nth-of-type(1) {
animation: standby2 2s infinite;
height: 10rem;
transform-origin: 100% 100%;
transform: translate3d(0,14rem, 0) skewX(0deg) rotate(1deg);
// left leg
u:nth-of-type(2) {
width: 8rem;
height: 10rem;
border-style: hidden;
border-left: $lw solid $line;
border-top: $lw solid $line;
transform: translate3d(-6rem,0, 0) rotate(-11deg);
border-radius: 100% 0% 0% 100%/100% 100% 0% 0%;
}
// right leg
u:nth-of-type(1) {
width: 8rem;
height: 10rem;
border-style: hidden;
border-top: $lw solid $line;
border-right: $lw solid $line;
transform: translate3d(1rem,0, 0) rotate(12deg);
border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
}
}
}
}
@keyframes standby {
50% {
transform: skewX(2deg) rotate(-5deg);
}
}
@keyframes standby2 {
50% {
transform: translate3d(0,14rem, 0) skewX(-5deg) rotate(1deg);
}
}
//dialog
$timer: 2s;
$timer2: 1s;
dialog1 player1 {
& > u {
& > u:nth-of-type(2) {
animation: standby3 $timer infinite;
// left arm
u:nth-of-type(2) {
animation: dance $timer infinite;
transform: translate3d(-2rem, .4rem, 0) rotate(60deg) scaleY(-1);
@keyframes dance {
25% {
transform: translate3d(-2rem, .4rem, 0) rotate(95deg) scaleY(-1);
}
50% {
transform: translate3d(-2rem, .4rem, 0) rotate(60deg) scaleY(-1);
}
75% {
transform: translate3d(-2rem, .4rem, 0) rotate(30deg) scaleY(-1);
}
}
}
//right arm
u:nth-of-type(3) {
animation: dance2 $timer infinite;
transform: translate3d(4.5rem, 6rem, 0) rotate(13deg);
@keyframes dance2 {
25% {
transform: translate3d(4.5rem, 6rem, 0) rotate(43deg);
}
50% {
transform: translate3d(4.5rem, 6rem, 0) rotate(13deg);
}
75% {
transform: translate3d(4.5rem, 6rem, 0) rotate(-13deg);
}
}
}
}
& > u:nth-of-type(1) {
animation: standby4 $timer infinite;
}
}
}
@keyframes standby3 {
25% {
transform: translate3d(0,1rem,0) skewX(3deg) rotate(-8deg);
}
50% {
transform: translate3d(0,0,0);
}
75% {
transform: translate3d(0,1rem,0) skewX(-3deg) rotate(8deg);
}
}
@keyframes standby4 {
25% {
transform: translate3d(0,14rem, 0) skewX(-8deg) rotate(3deg);
}
50% {
transform: translate3d(0,14rem, 0);
}
75% {
transform: translate3d(0,14rem, 0) skewX(8deg) rotate(- 3deg);
}
}
//miss
dialog2 player1 {
margin-top: 5rem;
margin-bottom: 5rem;
& > u {
& > u:nth-of-type(2) {
//head
u:nth-of-type(4) {
transform: translate3d(-2rem,4rem,0);
animation: looksadhead 6s infinite;
@keyframes looksadhead {
10%, 28% {
transform: translate3d(-2rem,3.8rem,0);
}
18%, 40% {
transform: translate3d(-2rem,4.2rem,0);
}
}
&:before {
transform: translate3d(1rem,3rem,0);
animation: looksad 6s infinite;
}
@keyframes looksad {
10%, 22% {
transform: translate3d(.5rem,3rem,0)
}
15%, 30% {
transform: translate3d(1.5rem,3rem,0);
}
70%, 74% {
transform: translate3d(1rem,3rem,0)
}
72% {
transform: translate3d(1rem,2.5rem,0) scaleY(0)
}
}
}
// left arm
u:nth-of-type(2) {
transform: translate3d(-2.8rem, 1.4rem, 0) rotate(32deg) scaleY(-1);
}
//right arm
u:nth-of-type(3) {
transform: translate3d(4.6rem, 6.2rem, 0) rotate(47deg);
}
}
}
}
//win
dialog3 player1 {
& > u {
transform: translate3d(0,5rem,0);
& > u:nth-of-type(2) {
animation: standby3 $timer2 infinite;
//head
u:nth-of-type(4) {
&:before {
transform: translate3d(2rem,2rem,0);
animation: lookhappy 4s infinite;
}
@keyframes lookhappy {
50% {
transform: translate3d(.5rem,2.5rem,0);
}
}
}
// left arm
u:nth-of-type(2) {
animation: windance $timer2 infinite;
transform: translate3d(-1.8rem, .8rem, 0) rotate(270deg);
@keyframes windance {
25% {
transform: translate3d(-1.8rem, .8rem, 0) rotate(320deg);
}
50% {
transform: translate3d(-1.8rem, .8rem, 0) rotate(260deg);
}
75% {
transform: translate3d(-1.8rem, .8rem, 0) rotate(230deg);
}
}
}
//right arm
u:nth-of-type(3) {
animation: windance2 $timer2 infinite;
transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1);
@keyframes windance2 {
25% {
transform: translate3d(4.5rem, 6.5rem, 0) rotate(50deg) scaleY(-1);
}
50% {
transform: translate3d(4.5rem, 6.5rem, 0) rotate(0deg) scaleY(-1);
}
75% {
transform: translate3d(4.5rem, 6.5rem, 0) rotate(-70deg) scaleY(-1);
}
}
}
}
& > u:nth-of-type(1) {
animation: standby4 $timer2 infinite;
}
}
}
@function texture ($a) {
$value: '#{random(30) - 15}rem #{random(30) - 15}rem 0 currentColor';
@for $i from 2 through $a {
$value: '#{$value} , #{random(30) - 15}rem #{random(30) - 15}rem 0 currentColor';
}
@return unquote($value);
}
$confetti: texture(4);
$confetti2: texture(5);
$confetti3: texture(6);
confetti {
transform: translate3d(0, 0,0);
width: 100%;
height: 50%;
overflow: hidden;
-webkit-mask-image: linear-gradient(#fff,#fff, $none);
&, &:before, &:after, *, *:before, *:after {
position: absolute;
top: 0;
left: 0;
}
& > u > u {
animation: sway $timer infinite linear;
transform: translate3d(0, 20rem,0) scale(0);
&, &:before, &:after {
content: '';
width: 1rem;
height: 1rem;
color: $red;
background: currentColor;
box-shadow: $confetti;
}
&:before {
color: $yellow;
transform: translate3d(4rem, -3rem,0);
box-shadow: $confetti2;
}
&:after {
color: $green;
transform: translate3d(1.5rem, -1rem,0);
box-shadow: $confetti3;
}
}
& > u {
transform: translate3d(35rem,0,0);
}
& > u:nth-of-type(2) {
transform: translate3d(15rem,0,0);
& > u {
animation: sway $timer .5s infinite linear;
transform: translate3d(0, 10rem,0) scale(0);
}
}
& > u:nth-of-type(3) {
transform: translate3d(40rem,0,0);
& > u {
animation: sway $timer 1s infinite linear;
transform: translate3d(0, 10rem,0) scale(0);
}
}
& > u:nth-of-type(4) {
transform: translate3d(7rem,0,0);
& > u {
animation: sway $timer 1.5s infinite linear;
transform: translate3d(0, 0,0) scale(0);
}
}
}
@keyframes sway {
10% {
transform: translate3d(.8rem, 5rem,0) scale(1);
opacity: 1;
}
25% {
transform: translate3d(-.9rem, 15rem,0) scale(1) scaleX(.9);
}
45% {
transform: translate3d(.7rem, 28rem,0) scale(1);
}
65% {
transform: translate3d(-.9rem, 35rem,0) scale(1) scaleX(1.1);
opacity: 1;
}
85% {
transform: translate3d(.6rem, 42rem,0) scale(1) scaleX(.9);
opacity: 1;
}
99% {
transform: translate3d(0, 50rem,0) scale(1) scaleX(1.1);
opacity: 1;
}
100% {
transform: translate3d(0, 50rem,0) scale(1);
opacity: 0;
}
}
// @import "play-animations-v2";
player2, player1 {
& > u {
animation: move-in $movespeed forwards;
&:after {
animation: move-shadow2 $movespeed forwards;
}
}
}
player2 {
transform: translate3d(38rem,80rem,0);
& > u {
transform: translate3d(-10rem,0,0);
& > u:nth-of-type(2) u:nth-of-type(4):before {
display: none;
}
}
}
@keyframes move-in {
50% {
transform: translate3d(0,-5rem,0);
}
}
@keyframes move-shadow1 {
50% {
transform: translate3d(-4rem, 24rem, 0) scale(1.1);
}
}
@keyframes move-shadow2 {
50% {
transform: translate3d(-4rem, 24rem, 0) scale(1.1);
}
}
@keyframes move-shadow3 {
50% {
transform: translate3d(-4rem, 24rem, 0) scale(1.1);
}
}
@keyframes move-shadow4 {
50% {
transform: translate3d(-4rem, 24rem, 0) scale(1.1);
}
}
//straight
//move to left
@keyframes move-left {
50% {
transform: translate3d(-5rem,-3rem,0);
}
100% {
transform: translate3d(-8rem,0,0);
}
}
//straight
//move to right
@keyframes move-right {
50% {
transform: translate3d(5rem,-4rem,0);
}
100% {
transform: translate3d(8rem,1rem,0);
}
}
//diagonal
//move to left
@keyframes move-left-d {
50% {
transform: translate3d(-5rem,-4rem,0);
}
100% {
transform: translate3d(-10rem,0,0);
}
}
//diagonal
//move to right
@keyframes move-right-d {
50% {
transform: translate3d(3rem,-3rem,0);
}
100% {
transform: translate3d(7rem,2rem,0);
}
}
// left arm swing
@keyframes left-arm-swing-1 {
10% {
transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
}
20% {
transform: translate3d(-2rem,1rem,0) rotate(250deg) scaleX(.5);
}
}
@keyframes left-arm-swing-2 {
10% {
transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
}
20% {
transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
}
}
@keyframes left-arm-swing-3 {
10% {
transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
}
20% {
transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
}
}
@keyframes left-arm-swing-4 {
10% {
transform: translate3d(-2rem,1.4rem,0) rotate(160deg);
}
20% {
transform: translate3d(-2rem,1.4rem,0) rotate(230deg) skew(10deg) scaleX(.8);
}
}
//right arm swing
@keyframes right-arm-swing-1 {
50% {
transform: translate3d(4rem,6rem,0) rotate(-60deg);
}
}
@keyframes right-arm-swing-2 {
50% {
transform: translate3d(4rem,6rem,0) rotate(-80deg);
}
}
@keyframes right-arm-swing-3 {
50% {
transform: translate3d(4rem,6rem,0) rotate(-60deg);
}
}
// move player2 left
.hit-left-left:checked ~ div > div >,
.hit-left-right-2:checked ~ div > div >,
#miss-left:checked ~ div > div >,
#win-left:checked ~ div > div > {
player2 > u {
animation: move-left $movespeed forwards;
&:after {
animation: move-shadow1 $movespeed forwards;
}
}
}
.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
player2 > u {
animation: move-left-d $movespeed forwards;
&:after {
animation: move-shadow2 $movespeed forwards;
}
}
}
// move player2 right
.hit-right-right:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div >,
#miss-right:checked ~ div > div >,
#win-right:checked ~ div > div > {
player2 > u {
animation: move-right $movespeed forwards;
&:after {
animation: move-shadow3 $movespeed forwards;
}
}
}
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
player2 > u {
animation: move-right-d $movespeed forwards;
&:after {
animation: move-shadow4 $movespeed forwards;
}
}
}
// move player1 right
.hit-right-right:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div > {
player1 > u {
animation: move-right $movespeed forwards;
&:after {
animation: move-shadow1 $movespeed forwards;
}
}
}
.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
player1 > u {
animation: move-right-d $movespeed .5s forwards;
&:after {
animation: move-shadow2 $movespeed .5s forwards;
}
}
}
// move player1 left
.hit-left-left:checked ~ div > div >,
.hit-left-right-2:checked ~ div > div >,
#win-left:checked ~ div > div >,
#serve-right:checked ~ div > div > {
player1 > u {
animation: move-left $movespeed .5s forwards;
&:after {
animation: move-shadow3 $movespeed .5s forwards;
}
}
}
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div >,
#win-right:checked ~ div > div > {
player1 > u {
animation: move-left-d $movespeed .5s forwards;
&:after {
animation: move-shadow4 $movespeed .5s forwards;
}
}
}
//arms
//arms
//arms
// miss player 2
#miss-left:checked ~ div > div > player2,
#miss-right:checked ~ div > div > player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-1 1s $movespeed ease-out;
}
//right arm
& > u:nth-of-type(3) {
transform: translate3d(4rem,6rem,0) rotate(-21deg);
animation: right-arm-swing-1 1s $movespeed ease-out;
}
}
}
}
// hit 1
.hit-left-right-2:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div >,
.hit-left-right:checked ~ div > div > {
player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-2 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-2 1s ease-out;
}
}
}
}
player1 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-2 1s 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-2 1s 1s ease-out;
}
}
}
}
}
// hit 2
.hit-right-right:checked ~ div > div >,
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-4 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-4 1s ease-out;
}
}
}
}
player1 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-3 1s .9s ease-out !important;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-3 1s .9s ease-out;
}
}
}
}
}
// hit 3
.hit-left-left:checked ~ div > div >,
.hit-right-left-2:checked ~ div > div > {
player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-1 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-1 1s ease-out;
}
}
}
}
player1 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-1 1s .9s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-1 1s .9s ease-out;
}
}
}
}
}
// win left
#win-left:checked ~ div > div > {
player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-2 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-2 1s ease-out;
}
}
}
}
player1 {
& > u {
& > u:nth-of-type(2) {
//head
u:nth-of-type(4) {
&:before {
transform: translate3d(1rem,2rem,0);
animation: misseyes 5s .5s;
}
@keyframes misseyes {
20% {
transform: translate3d(1.5rem,2.5rem,0);
}
30% {
transform: translate3d(.5rem,2.5rem,0);
}
90% {
transform: translate3d(.5rem,1rem,0);
}
}
}
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-1 5s 1.9s ease-out !important;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-1 5s 1.9s ease-out;
}
}
}
}
}
// win right
#win-right:checked ~ div > div > {
player2 {
& > u {
& > u:nth-of-type(2) {
//left arm
& > u:nth-of-type(2) {
animation: left-arm-swing-1 1s ease-out;
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-1 1s ease-out;
}
}
}
}
player1 {
& > u {
& > u:nth-of-type(2) {
//head
u:nth-of-type(4) {
animation: duck 5s .5s;
@keyframes duck {
30% {
transform: translate3d(-2rem, 1rem, 0);
}
90% {
transform: translate3d(-2rem, 2rem, 0);
}
}
&:before {
transform: translate3d(1rem,2rem,0);
animation: misseyes2 5s .5s;
}
@keyframes misseyes2 {
20% {
transform: translate3d(1.5rem,2.5rem,0);
}
30% {
transform: translate3d(1rem,2.5rem,0);
}
90% {
transform: translate3d(1rem,1rem,0);
}
}
}
//left arm
& > u:nth-of-type(2) {
animation: left-arm-duck 5s 1.9s ease-out;
}
@keyframes left-arm-duck {
10% {
transform: translate3d(-2rem,1.4rem,0) rotate(200deg);
}
20% {
transform: translate3d(-2rem,1rem,0) rotate(300deg) scaleX(.5);
}
}
//right arm
& > u:nth-of-type(3) {
animation: right-arm-swing-1 5s 1.9s ease-out;
}
}
}
}
}
//overlay
#win-left:checked ~ div > winoverlay, #win-right:checked ~ div > winoverlay {
&:after, & {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:before, &:after, & {
position: absolute;
}
&:before {
content: '';
width: 4rem;
height: 4rem;
border-radius: 50%;
border-left: $lw dashed $red;
border-top: $lw dashed $red;
border-right: $lw solid $red;
border-bottom: $lw solid $red;
left: 4rem;
top: 3rem;
animation: blinktext .5s 1s linear infinite;
opacity: 0;
transform: scale(1.3) rotate(-45deg);
background-image: linear-gradient(135deg, $none 50%, $red 50%);
background-position: calc(100% - 1.4rem) .7rem;
background-size: 2rem 2rem;
background-repeat: no-repeat;
@keyframes blinktext {
40% {
opacity: 0;
}
50%, 90% {
opacity: 1;
}
}
}
&:after {
content: '';
background: repeating-linear-gradient($red,$red 1rem, $none 1rem, $none 2rem);
opacity: .1;
animation: slowmo .2s 1s linear infinite;
mix-blend-mode: difference;
opacity: 0;
-webkit-mask-image: linear-gradient(#000,$none);
}
@keyframes slowmo {
49% {
transform: translate3d(0,0,0);
opacity: .1;
}
50%, 100% {
transform: translate3d(0,1rem,0);
}
}
}
// @import "ball";
// #1 serve left top
#serve-left:checked ~ div > div > {
//over the table
ball {
transform: translate3d(27rem,15rem,0);
animation: serveball3 1s 1s;
}
@keyframes serveball3 {
1%, 100% {
opacity: 1;
}
50% {
transform: translate3d(20rem,50rem,0);
}
100% {
transform: translate3d(12rem,120rem,0);
}
}
player1 {
& > u {
ball {
transform: translate3d(-10rem,1rem,0);
animation: serveball2 1s;
opacity: 0;
@keyframes serveball2 {
49%,100% {
transform: translate3d(-10rem,1rem,0);
opacity: 0;
}
50% {
opacity: 1;
}
75% {
transform: translate3d(-10rem,-10rem,0);
opacity: 1;
}
}
}
& > u:nth-of-type(2) {
//left arm
u:nth-of-type(2) {
animation: serve-left 2s .1s ease-out;
@keyframes serve-left {
5%, 50%, 70% {
transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg);
}
40% {
transform: translate3d(-2rem,1.4rem,0) rotate(280deg);
}
}
}
//right arm
u:nth-of-type(3) {
transform: translate3d(4rem,6rem,0) rotate(-21deg);
animation: serve 1s ease-out;
&:before {
transform: translate3d(5rem,8rem,0);
animation: serveball 1s ease-out;
}
@keyframes serve {
50% {
transform: translate3d(4rem,6rem,0) rotate(150deg);
}
}
@keyframes serveball {
49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
}
}
}
}
}
// #1 serve right top
#serve-right:checked ~ div > div > {
//over the table
ball {
transform: translate3d(20rem,16rem,0);
animation: serveball4 1s 1s;
}
@keyframes serveball4 {
1%, 100% {
opacity: 1;
}
50% {
transform: translate3d(25rem,50rem,0);
}
100% {
transform: translate3d(32rem,120rem,0);
}
}
player1 {
& > u {
ball {
transform: translate3d(-10rem,1rem,0);
animation: serveball2 1s;
opacity: 0;
@keyframes serveball2 {
49%,100% {
transform: translate3d(-10rem,1rem,0);
opacity: 0;
}
50% {
opacity: 1;
}
75% {
transform: translate3d(-10rem,-10rem,0);
opacity: 1;
}
}
}
& > u:nth-of-type(2) {
//left arm
u:nth-of-type(2) {
animation: serve-left 2s .1s ease-out;
@keyframes serve-left {
5%, 50%, 70% {
transform: translate3d(-2rem, 1.4rem, 0) rotate(150deg);
}
40% {
transform: translate3d(-2rem,1.4rem,0) rotate(280deg);
}
}
}
//right arm
u:nth-of-type(3) {
transform: translate3d(4rem,6rem,0) rotate(-21deg);
animation: serve 1s ease-out;
&:before {
transform: translate3d(5rem,8rem,0);
animation: serveball 1s ease-out;
}
@keyframes serve {
50% {
transform: translate3d(4rem,6rem,0) rotate(150deg);
}
}
@keyframes serveball {
49% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
}
}
}
}
}
// hit left straight to straight
.hit-left-left:checked ~ div > div > {
ball {
transform: translate3d(15rem, 89rem, 0);
animation: hit-left-left 2s;
}
// up and down the table
@keyframes hit-left-left {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(16.5rem,40rem,0);
}
50% {
transform: translate3d(16.5rem,15rem,0);
}
75% {
transform: translate3d(16.5rem,50rem,0);
}
100% {
transform: translate3d(16.5rem, 120rem, 0);
}
}
}
// hit right straight to straight
.hit-right-right:checked ~ div > div > {
ball {
transform: translate3d(32rem, 89rem, 0);
animation: hit-right-right 2s;
}
// up and down the table
@keyframes hit-right-right {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(34rem,40rem,0);
}
50% {
transform: translate3d(34rem,15rem,0);
}
75% {
transform: translate3d(34rem,50rem,0);
}
100% {
transform: translate3d(34rem, 120rem, 0);
}
}
}
// hit left straight to right
.hit-left-right-2:checked ~ div > div > {
ball {
transform: translate3d(15rem, 89rem, 0);
animation: hit-left-right-2 2s;
}
// up and down the table
@keyframes hit-left-right-2 {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(16.5rem,40rem,0);
}
50% {
transform: translate3d(18rem,15rem,0);
}
75% {
transform: translate3d(25rem,50rem,0);
}
100% {
transform: translate3d(34rem, 120rem, 0);
}
}
}
// hit right straight to right
.hit-right-left-2:checked ~ div > div > {
ball {
transform: translate3d(33rem, 89rem, 0);
animation: hit-right-left-2 2s;
}
// up and down the table
@keyframes hit-right-left-2 {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(33.5rem,40rem,0);
}
50% {
transform: translate3d(34rem,15rem,0);
}
75% {
transform: translate3d(25rem,50rem,0);
}
100% {
transform: translate3d(16.5rem, 120rem, 0);
}
}
}
// #4 return right bottom
.hit-right-left:checked ~ div > div >,
.hit-right-left-3:checked ~ div > div > {
ball {
transform: translate3d(30rem, 89rem, 0);
animation: returnball3 2s;
}
// up and down the table
@keyframes returnball3 {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(20rem,40rem,0);
}
50% {
transform: translate3d(15rem,15rem,0);
}
75% {
transform: translate3d(16rem,50rem,0);
}
100% {
transform: translate3d(17rem, 120rem, 0);
}
}
}
// #5 return left bottom
.hit-left-right:checked ~ div > div >,
.hit-left-right-3:checked ~ div > div > {
ball {
transform: translate3d(14rem, 89rem, 0);
animation: returnball4 2s;
}
// up and down the table
@keyframes returnball4 {
1%, 100% {
opacity: 1;
}
25% {
transform: translate3d(23rem,40rem,0);
}
50% {
transform: translate3d(32rem,15rem,0);
}
75% {
transform: translate3d(33rem,50rem,0);
}
100% {
transform: translate3d(34rem, 120rem, 0);
}
}
}
// win right
#win-right:checked ~ div > div > {
ball {
transform: translate3d(30rem, 89rem, 0);
animation: winrightball 5s;
}
// up the table
@keyframes winrightball {
1%, 100% {
opacity: 1;
}
15% {
transform: translate3d(30rem,40rem,0);
}
100% {
transform: translate3d(30rem,0rem,0);
}
}
}
// win left
#win-left:checked ~ div > div > {
ball {
transform: translate3d(14rem, 89rem, 0);
animation: winleftball 5s;
}
// up the table
@keyframes winleftball {
1%, 100% {
opacity: 1;
}
15% {
transform: translate3d(21rem,40rem,0);
}
100% {
transform: translate3d(28rem,0rem,0);
}
}
}
View Compiled
// - No images
// - No JavaScript
// - Only CSS
// ... And a few HTML radio inputs :)
// How it was made:
// https://youtu.be/MX_Y1jO_iIk
// linktr.ee/ivorjetski for more
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.