Skip to content

Instantly share code, notes, and snippets.

@acid-chicken

acid-chicken/index.html

Last active December 8, 2019 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acid-chicken/1bb187995e7a5389b1008e30da40817b to your computer and use it in GitHub Desktop.
Save acid-chicken/1bb187995e7a5389b1008e30da40817b to your computer and use it in GitHub Desktop.
Download ZIP
movable grid by fixed elements
Raw
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
@keyframes l{0%{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes u{0%{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes r{0%{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes d{0%{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes lr{0%{transform:translateX(400%)}to{transform:translateX(500%)}}
@keyframes ud{0%{transform:translateY(400%)}to{transform:translateY(500%)}}
@keyframes rl{0%{transform:translateX(-400%)}to{transform:translateX(-500%)}}
@keyframes du{0%{transform:translateY(-400%)}to{transform:translateY(-500%)}}
*{box-sizing:border-box;margin:0}
body{display:grid;overflow:hidden}
body,html{height:100%}
body[data-x$='0']>:nth-child(5n-4),body[data-x$='9']>:nth-child(5n-3),body[data-x$='8']>:nth-child(5n-2),body[data-x$='7']>:nth-child(5n-1),body[data-x$='6']>:nth-child(5n),body[data-x$='5']>:nth-child(5n-4),body[data-x$='4']>:nth-child(5n-3),body[data-x$='3']>:nth-child(5n-2),body[data-x$='2']>:nth-child(5n-1),body[data-x$='1']>:nth-child(5n){grid-column:1}
body[data-x$='0']>:nth-child(5n-3),body[data-x$='9']>:nth-child(5n-2),body[data-x$='8']>:nth-child(5n-1),body[data-x$='7']>:nth-child(5n),body[data-x$='6']>:nth-child(5n-4),body[data-x$='5']>:nth-child(5n-3),body[data-x$='4']>:nth-child(5n-2),body[data-x$='3']>:nth-child(5n-1),body[data-x$='2']>:nth-child(5n),body[data-x$='1']>:nth-child(5n-4){grid-column:2}
body[data-x$='0']>:nth-child(5n-2),body[data-x$='9']>:nth-child(5n-1),body[data-x$='8']>:nth-child(5n),body[data-x$='7']>:nth-child(5n-4),body[data-x$='6']>:nth-child(5n-3),body[data-x$='5']>:nth-child(5n-2),body[data-x$='4']>:nth-child(5n-1),body[data-x$='3']>:nth-child(5n),body[data-x$='2']>:nth-child(5n-4),body[data-x$='1']>:nth-child(5n-3){grid-column:3}
body[data-x$='0']>:nth-child(5n-1),body[data-x$='9']>:nth-child(5n),body[data-x$='8']>:nth-child(5n-4),body[data-x$='7']>:nth-child(5n-3),body[data-x$='6']>:nth-child(5n-2),body[data-x$='5']>:nth-child(5n-1),body[data-x$='4']>:nth-child(5n),body[data-x$='3']>:nth-child(5n-4),body[data-x$='2']>:nth-child(5n-3),body[data-x$='1']>:nth-child(5n-2){grid-column:4}
body[data-x$='0']>:nth-child(5n),body[data-x$='9']>:nth-child(5n-4),body[data-x$='8']>:nth-child(5n-3),body[data-x$='7']>:nth-child(5n-2),body[data-x$='6']>:nth-child(5n-1),body[data-x$='5']>:nth-child(5n),body[data-x$='4']>:nth-child(5n-4),body[data-x$='3']>:nth-child(5n-3),body[data-x$='2']>:nth-child(5n-2),body[data-x$='1']>:nth-child(5n-1){grid-column:5}
body[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='7']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='6']>:nth-child(-n+25),
body[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='2']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='1']>:nth-child(-n+25){grid-row:1}
body[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='8']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='7']>:nth-child(-n+25),body[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),
body[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='3']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='2']>:nth-child(-n+25),body[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5){grid-row:2}
body[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='9']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='8']>:nth-child(-n+25),body[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),
body[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='4']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='3']>:nth-child(-n+25),body[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10){grid-row:3}
body[data-y$='0']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='9']>:nth-child(-n+25),body[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),
body[data-y$='5']>:nth-child(-n+25):nth-child(-n+20),body[data-y$='4']>:nth-child(-n+25),body[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15){grid-row:4}
body[data-y$='0']>:nth-child(-n+25),body[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='6']>:nth-child(-n+25):nth-child(-n+20),
body[data-y$='5']>:nth-child(-n+25),body[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),body[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),body[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),body[data-y$='1']>:nth-child(-n+25):nth-child(-n+20){grid-row:5}
.l[data-x$='0']>:nth-child(5n-3),.l[data-x$='9']>:nth-child(5n-2),.l[data-x$='8']>:nth-child(5n-1),.l[data-x$='7']>:nth-child(5n),.l[data-x$='6']>:nth-child(5n-4),.l[data-x$='5']>:nth-child(5n-3),.l[data-x$='4']>:nth-child(5n-2),.l[data-x$='3']>:nth-child(5n-1),.l[data-x$='2']>:nth-child(5n),.l[data-x$='1']>:nth-child(5n-4){animation:l.2s cubic-bezier(.96,.04,.04,.96).04s both}
.l[data-x$='0']>:nth-child(5n-2),.l[data-x$='9']>:nth-child(5n-1),.l[data-x$='8']>:nth-child(5n),.l[data-x$='7']>:nth-child(5n-4),.l[data-x$='6']>:nth-child(5n-3),.l[data-x$='5']>:nth-child(5n-2),.l[data-x$='4']>:nth-child(5n-1),.l[data-x$='3']>:nth-child(5n),.l[data-x$='2']>:nth-child(5n-4),.l[data-x$='1']>:nth-child(5n-3){animation:l.2s cubic-bezier(.96,.04,.04,.96).08s both}
.l[data-x$='0']>:nth-child(5n-1),.l[data-x$='9']>:nth-child(5n),.l[data-x$='8']>:nth-child(5n-4),.l[data-x$='7']>:nth-child(5n-3),.l[data-x$='6']>:nth-child(5n-2),.l[data-x$='5']>:nth-child(5n-1),.l[data-x$='4']>:nth-child(5n),.l[data-x$='3']>:nth-child(5n-4),.l[data-x$='2']>:nth-child(5n-3),.l[data-x$='1']>:nth-child(5n-2){animation:l.2s cubic-bezier(.96,.04,.04,.96).12s both}
.l[data-x$='0']>:nth-child(5n),.l[data-x$='9']>:nth-child(5n-4),.l[data-x$='8']>:nth-child(5n-3),.l[data-x$='7']>:nth-child(5n-2),.l[data-x$='6']>:nth-child(5n-1),.l[data-x$='5']>:nth-child(5n),.l[data-x$='4']>:nth-child(5n-4),.l[data-x$='3']>:nth-child(5n-3),.l[data-x$='2']>:nth-child(5n-2),.l[data-x$='1']>:nth-child(5n-1){animation:l.2s cubic-bezier(.96,.04,.04,.96).16s both}
.r[data-x$='0']>:nth-child(5n-1),.r[data-x$='9']>:nth-child(5n),.r[data-x$='8']>:nth-child(5n-4),.r[data-x$='7']>:nth-child(5n-3),.r[data-x$='6']>:nth-child(5n-2),.r[data-x$='5']>:nth-child(5n-1),.r[data-x$='4']>:nth-child(5n),.r[data-x$='3']>:nth-child(5n-4),.r[data-x$='2']>:nth-child(5n-3),.r[data-x$='1']>:nth-child(5n-2){animation:r.2s cubic-bezier(.96,.04,.04,.96).04s both}
.r[data-x$='0']>:nth-child(5n-2),.r[data-x$='9']>:nth-child(5n-1),.r[data-x$='8']>:nth-child(5n),.r[data-x$='7']>:nth-child(5n-4),.r[data-x$='6']>:nth-child(5n-3),.r[data-x$='5']>:nth-child(5n-2),.r[data-x$='4']>:nth-child(5n-1),.r[data-x$='3']>:nth-child(5n),.r[data-x$='2']>:nth-child(5n-4),.r[data-x$='1']>:nth-child(5n-3){animation:r.2s cubic-bezier(.96,.04,.04,.96).08s both}
.r[data-x$='0']>:nth-child(5n-3),.r[data-x$='9']>:nth-child(5n-2),.r[data-x$='8']>:nth-child(5n-1),.r[data-x$='7']>:nth-child(5n),.r[data-x$='6']>:nth-child(5n-4),.r[data-x$='5']>:nth-child(5n-3),.r[data-x$='4']>:nth-child(5n-2),.r[data-x$='3']>:nth-child(5n-1),.r[data-x$='2']>:nth-child(5n),.r[data-x$='1']>:nth-child(5n-4){animation:r.2s cubic-bezier(.96,.04,.04,.96).12s both}
.r[data-x$='0']>:nth-child(5n-4),.r[data-x$='9']>:nth-child(5n-3),.r[data-x$='8']>:nth-child(5n-2),.r[data-x$='7']>:nth-child(5n-1),.r[data-x$='6']>:nth-child(5n),.r[data-x$='5']>:nth-child(5n-4),.r[data-x$='4']>:nth-child(5n-3),.r[data-x$='3']>:nth-child(5n-2),.r[data-x$='2']>:nth-child(5n-1),.r[data-x$='1']>:nth-child(5n){animation:r.2s cubic-bezier(.96,.04,.04,.96).16s both}
.u[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='8']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='7']>:nth-child(-n+25),.u[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),
.u[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='3']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='2']>:nth-child(-n+25),.u[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5){animation:u.2s cubic-bezier(.96,.04,.04,.96).04s both}
.u[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='9']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='8']>:nth-child(-n+25),.u[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),
.u[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='4']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='3']>:nth-child(-n+25),.u[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10){animation:u.2s cubic-bezier(.96,.04,.04,.96).08s both}
.u[data-y$='0']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='9']>:nth-child(-n+25),.u[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),
.u[data-y$='5']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='4']>:nth-child(-n+25),.u[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15){animation:u.2s cubic-bezier(.96,.04,.04,.96).12s both}
.u[data-y$='0']>:nth-child(-n+25),.u[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='6']>:nth-child(-n+25):nth-child(-n+20),
.u[data-y$='5']>:nth-child(-n+25),.u[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='1']>:nth-child(-n+25):nth-child(-n+20){animation:u.2s cubic-bezier(.96,.04,.04,.96).16s both}
.d[data-y$='0']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='9']>:nth-child(-n+25),.d[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),
.d[data-y$='5']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='4']>:nth-child(-n+25),.d[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15){animation:d.2s cubic-bezier(.96,.04,.04,.96).04s both}
.d[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='9']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='8']>:nth-child(-n+25),.d[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),
.d[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='4']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='3']>:nth-child(-n+25),.d[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10){animation:d.2s cubic-bezier(.96,.04,.04,.96).08s both}
.d[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='8']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='7']>:nth-child(-n+25),.d[data-y$='6']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),
.d[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='3']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='2']>:nth-child(-n+25),.d[data-y$='1']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5){animation:d.2s cubic-bezier(.96,.04,.04,.96).12s both}
.d[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='7']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='6']>:nth-child(-n+25),
.d[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='2']>:nth-child(-n+25):nth-child(-n+20),.d[data-y$='1']>:nth-child(-n+25){animation:d.2s cubic-bezier(.96,.04,.04,.96).16s both}
.l[data-x$='0']>:nth-child(5n-4),.l[data-x$='9']>:nth-child(5n-3),.l[data-x$='8']>:nth-child(5n-2),.l[data-x$='7']>:nth-child(5n-1),.l[data-x$='6']>:nth-child(5n),.l[data-x$='5']>:nth-child(5n-4),.l[data-x$='4']>:nth-child(5n-3),.l[data-x$='3']>:nth-child(5n-2),.l[data-x$='2']>:nth-child(5n-1),.l[data-x$='1']>:nth-child(5n){animation:l.2s cubic-bezier(.96,.04,.04,.96),lr.2s cubic-bezier(.96,.04,.04,.96).2s reverse}
.r[data-x$='0']>:nth-child(5n),.r[data-x$='9']>:nth-child(5n-4),.r[data-x$='8']>:nth-child(5n-3),.r[data-x$='7']>:nth-child(5n-2),.r[data-x$='6']>:nth-child(5n-1),.r[data-x$='5']>:nth-child(5n),.r[data-x$='4']>:nth-child(5n-4),.r[data-x$='3']>:nth-child(5n-3),.r[data-x$='2']>:nth-child(5n-2),.r[data-x$='1']>:nth-child(5n-1){animation:r.2s cubic-bezier(.96,.04,.04,.96),rl.2s cubic-bezier(.96,.04,.04,.96).2s reverse}
.u[data-y$='0']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='7']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='6']>:nth-child(-n+25),
.u[data-y$='5']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.u[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.u[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.u[data-y$='2']>:nth-child(-n+25):nth-child(-n+20),.u[data-y$='1']>:nth-child(-n+25){animation:u.2s cubic-bezier(.96,.04,.04,.96),ud.2s cubic-bezier(.96,.04,.04,.96).2s reverse}
.d[data-y$='0']>:nth-child(-n+25),.d[data-y$='9']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='8']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='7']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='6']>:nth-child(-n+25):nth-child(-n+20),
.d[data-y$='5']>:nth-child(-n+25),.d[data-y$='4']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10):nth-child(-n+5),.d[data-y$='3']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15):nth-child(-n+10),.d[data-y$='2']>:nth-child(-n+25):nth-child(-n+20):nth-child(-n+15),.d[data-y$='1']>:nth-child(-n+25):nth-child(-n+20){animation:d.2s cubic-bezier(.96,.04,.04,.96),du.2s cubic-bezier(.96,.04,.04,.96).2s reverse}
</style>
<div style="background:#CC6439"></div>
<div style="background:#998177"></div>
<div style="background:#FF6161"></div>
<div style="background:#6CCC39"></div>
<div style="background:#CC3979"></div>
<div style="background:#997786"></div>
<div style="background:#DA61FF"></div>
<div style="background:#CCBD39"></div>
<div style="background:#39BACC"></div>
<div style="background:#779599"></div>
<div style="background:#61FFBA"></div>
<div style="background:#CC3983"></div>
<div style="background:#39CC8C"></div>
<div style="background:#77998A"></div>
<div style="background:#61FF61"></div>
<div style="background:#A439CC"></div>
<div style="background:#8FCC39"></div>
<div style="background:#8B9977"></div>
<div style="background:#FFF261"></div>
<div style="background:#3960CC"></div>
<div style="background:#CCA639"></div>
<div style="background:#999077"></div>
<div style="background:#FFB261"></div>
<div style="background:#39CCA2"></div>
<div style="background:#000000"></div>
<script>'use strict'
!function(b,c,d){
b.addEventListener('keydown',function(e){e.repeat||!function(a){setTimeout((b[c]?0:a--?a--?a--?a--?0:
(b[c]='d',function(){++b[d].y,b[c]=''}):
(b[c]='r',function(){++b[d].x,b[c]=''}):
(b[c]='u',function(){~--b[d].y||(b[d].y=4),b[c]=''}):
(b[c]='l',function(){~--b[d].x||(b[d].x=4),b[c]=''}))||function(){},400)}(e.keyCode-37)})
b[d].x=b[d].y=0}(document.body,'className','dataset')
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment