div+css实现一个摩斯密码翻译器代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：div+css实现一个摩斯密码翻译器代码，鼠标按住中间的圆圈模拟莫斯信号输入，短按是点，长按是段。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Mono&display=swap");
html {
  width: 100vw;
  height: 100vh;
}
html body {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  touch-action: none;
}
html body *, html body *::before, html body *::after {
  box-sizing: inherit;
  touch-action: inherit;
}

@-webkit-keyframes hide {
  0% {
    opacity: 1;
    --position: initial;
  }
  99.999% {
    opacity: 1;
    --position: initial;
  }
  100% {
    opacity: 0;
    --position: absolute;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
    --position: initial;
  }
  99.999% {
    opacity: 1;
    --position: initial;
  }
  100% {
    opacity: 0;
    --position: absolute;
  }
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
    --position: absolute;
  }
  99.999% {
    opacity: 0;
    --position: absolute;
  }
  100% {
    opacity: 1;
    --position: initial;
  }
}
@keyframes reveal {
  0% {
    opacity: 0;
    --position: absolute;
  }
  99.999% {
    opacity: 0;
    --position: absolute;
  }
  100% {
    opacity: 1;
    --position: initial;
  }
}
@-webkit-keyframes enable {
  0% {
    pointer-events: none;
  }
  99.999% {
    pointer-events: none;
  }
  100% {
    pointer-events: auto;
  }
}
@keyframes enable {
  0% {
    pointer-events: none;
  }
  99.999% {
    pointer-events: none;
  }
  100% {
    pointer-events: auto;
  }
}
@-webkit-keyframes disable {
  0% {
    color: black;
  }
  0.001% {
    color: grey;
  }
  100% {
    color: grey;
  }
}
@keyframes disable {
  0% {
    color: black;
  }
  0.001% {
    color: grey;
  }
  100% {
    color: grey;
  }
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "translation" "morse-code" "touch";
  --screen: 100vmin;
  --break-point: clamp(0px, var(--screen) - 500px, 50vmin);
  --width: calc(var(--screen) - var(--break-point));
  width: var(--width);
  font-size: var(--width);
  height: calc(var(--width) * 1.2);
  border: 0.0175em solid grey;
  background-color: white;
  border-radius: 5%/4%;
  overflow: hidden;
  margin: auto;
  position: relative;
  font-family: "Open Sans", sans-serif;
  --dot: "•";
  --dash: "-";
}
.container .touch40.start ~ .layer40 {
  --start-A: paused;
}
.container .touch40.start:checked ~ .layer40 {
  --start-A: running;
}
.container .touch40 ~ .layer40 {
  --state40: paused;
  --checked-A-1:  ;
  --LEVEL-A-1:  ;
  --touched-A-1: + 0s;
}
.container .touch40:active ~ .layer40 {
  --state40: running;
  --start-A: paused;
}
.container .touch40:checked ~ .layer40 {
  --checked-A-1: initial;
  --LEVEL-A-0:  ;
  --LEVEL-A-1: initial;
  --touched-A-1: + 0.25s;
}
.container .layer40 {
  -webkit-animation: touch-A-1 2s var(--state40) linear forwards;
          animation: touch-A-1 2s var(--state40) linear forwards;
}
.container .touch39 ~ .layer39 {
  --state39: paused;
  --checked-A-2:  ;
  --LEVEL-A-2:  ;
  --touched-A-2: + 0s;
}
.container .touch39:active ~ .layer39 {
  --state39: running;
  --start-A: paused;
}
.container .touch39:checked ~ .layer39 {
  --checked-A-2: initial;
  --LEVEL-A-1:  ;
  --LEVEL-A-2: initial;
  --touched-A-2: + 0.25s;
}
.container .layer39 {
  -webkit-animation: touch-A-2 2s var(--state39) linear forwards;
          animation: touch-A-2 2s var(--state39) linear forwards;
}
.container .touch38 ~ .layer38 {
  --state38: paused;
  --checked-A-3:  ;
  --LEVEL-A-3:  ;
  --touched-A-3: + 0s;
}
.container .touch38:active ~ .layer38 {
  --state38: running;
  --start-A: paused;
}
.container .touch38:checked ~ .layer38 {
  --checked-A-3: initial;
  --LEVEL-A-2:  ;
  --LEVEL-A-3: initial;
  --touched-A-3: + 0.25s;
}
.container .layer38 {
  -webkit-animation: touch-A-3 2s var(--state38) linear forwards;
          animation: touch-A-3 2s var(--state38) linear forwards;
}
.container .touch37 ~ .layer37 {
  --state37: paused;
  --checked-A-4:  ;
  --LEVEL-A-4:  ;
  --touched-A-4: + 0s;
}
.container .touch37:active ~ .layer37 {
  --state37: running;
  --start-A: paused;
}
.container .touch37:checked ~ .layer37 {
  --checked-A-4: initial;
  --LEVEL-A-3:  ;
  --LEVEL-A-4: initial;
  --touched-A-4: + 0.25s;
}
.container .layer37 {
  -webkit-animation: touch-A-4 2s var(--state37) linear forwards;
          animation: touch-A-4 2s var(--state37) linear forwards;
}
.container .layer37.end {
  --touched-A: calc(2s var(--touched-A-1) var(--touched-A-2) var(--touched-A-3) var(--touched-A-4));
  -webkit-animation: touch-A-4 2s var(--state37) linear forwards, enable var(--touched-A) var(--start-A) linear forwards;
          animation: touch-A-4 2s var(--state37) linear forwards, enable var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end::before {
  -webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards;
          animation: reveal var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end > .start {
  -webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards;
          animation: reveal var(--touched-A) var(--start-A) linear forwards;
}
.container .layer37.end > .timer {
  -webkit-animation: expire var(--touched-A) var(--start-A) linear;
          animation: expire var(--touched-A) var(--start-A) linear;
}
.container .layer37.end > .timer::before {
  -webkit-animation: flash var(--touched-A) var(--start-A) linear backwards;
          animation: flash var(--touched-A) var(--start-A) linear backwards;
}
.container .layer37.end > .clear {
  -webkit-animation: disable var(--touched-A) var(--start-A) linear backwards;
          animation: disable var(--touched-A) var(--start-A) linear backwards;
}
.container .touch36.start ~ .layer36 {
  --start-B: paused;
}
.container .touch36.start:checked ~ .layer36 {
  --start-B: running;
}
.container .touch36 ~ .layer36 {
  --state36: paused;
  --checked-B-1:  ;
  --LEVEL-B-1:  ;
  --touched-B-1: + 0s;
}
.container .touch36:active ~ .layer36 {
  --state36: running;
  --start-B: paused;
}
.container .touch36:checked ~ .layer36 {
  --checked-B-1: initial;
  --LEVEL-B-0:  ;
  --LEVEL-B-1: initial;
  --touched-B-1: + 0.25s;
}
.container .layer36 {
  -webkit-animation: touch-B-1 2s var(--state36) linear forwards;
          animation: touch-B-1 2s var(--state36) linear forwards;
}
.container .touch35 ~ .layer35 {
  --state35: paused;
  --checked-B-2:  ;
  --LEVEL-B-2:  ;
  --touched-B-2: + 0s;
}
.container .touch35:active ~ .layer35 {
  --state35: running;
  --start-B: paused;
}
.container .touch35:checked ~ .layer35 {
  --checked-B-2: initial;
  --LEVEL-B-1:  ;
  --LEVEL-B-2: initial;
  --touched-B-2: + 0.25s;
}
.container .layer35 {
  -webkit-animation: touch-B-2 2s var(--state35) linear forwards;
          animation: touch-B-2 2s var(--state35) linear forwards;
}
.container .touch34 ~ .layer34 {
  --state34: paused;
  --checked-B-3:  ;
  --LEVEL-B-3:  ;
  --touched-B-3: + 0s;
}
.container .touch34:active ~ .layer34 {
  --state34: running;
  --start-B: paused;
}
.container .touch34:checked ~ .layer34 {
  --checked-B-3: initial;
  --LEVEL-B-2:  ;
  --LEVEL-B-3: initial;
  --touched-B-3: + 0.25s;
}
.container .layer34 {
  -webkit-animation: touch-B-3 2s var(--state34) linear forwards;
          animation: touch-B-3 2s var(--state34) linear forwards;
}
.container .touch33 ~ .layer33 {
  --state33: paused;
  --checked-B-4:  ;
  --LEVEL-B-4:  ;
  --touched-B-4: + 0s;
}
.container .touch33:active ~ .layer33 {
  --state33: running;
  --start-B: paused;
}
.container .touch33:checked ~ .layer33 {
  --checked-B-4: initial;
  --LEVEL-B-3:  ;
  --LEVEL-B-4: initial;
  --touched-B-4: + 0.25s;
}
.container .layer33 {
  -webkit-animation: touch-B-4 2s var(--state33) linear forwards;
          animation: touch-B-4 2s var(--state33) linear forwards;
}
.container .layer33.end {
  --touched-B: calc(2s var(--touched-B-1) var(--touched-B-2) var(--touched-B-3) var(--touched-B-4));
  -webkit-animation: touch-B-4 2s var(--state33) linear forwards, enable var(--touched-B) var(--start-B) linear forwards;
          animation: touch-B-4 2s var(--state33) linear forwards, enable var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end::before {
  -webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards;
          animation: reveal var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end > .start {
  -webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards;
          animation: reveal var(--touched-B) var(--start-B) linear forwards;
}
.container .layer33.end > .timer {
  -webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards, expire var(--touched-B) var(--start-B) linear;
          animation: reveal var(--touched-A) var(--start-A) linear forwards, expire var(--touched-B) var(--start-B) linear;
}
.container .layer33.end > .timer::before {
  -webkit-animation: flash var(--touched-B) var(--start-B) linear backwards;
          animation: flash var(--touched-B) var(--start-B) linear backwards;
}
.container .layer33.end > .clear {
  -webkit-animation: reveal var(--touched-A) var(--start-A) linear forwards, disable var(--touched-B) var(--start-B) linear backwards;
          animation: reveal var(--touched-A) var(--start-A) linear forwards, disable var(--touched-B) var(--start-B) linear backwards;
}
.container .touch32.start ~ .layer32 {
  --start-C: paused;
}
.container .touch32.start:checked ~ .layer32 {
  --start-C: running;
}
.container .touch32 ~ .layer32 {
  --state32: paused;
  --checked-C-1:  ;
  --LEVEL-C-1:  ;
  --touched-C-1: + 0s;
}
.container .touch32:active ~ .layer32 {
  --state32: running;
  --start-C: paused;
}
.container .touch32:checked ~ .layer32 {
  --checked-C-1: initial;
  --LEVEL-C-0:  ;
  --LEVEL-C-1: initial;
  --touched-C-1: + 0.25s;
}
.container .layer32 {
  -webkit-animation: touch-C-1 2s var(--state32) linear forwards;
          animation: touch-C-1 2s var(--state32) linear forwards;
}
.container .touch31 ~ .layer31 {
  --state31: paused;
  --checked-C-2:  ;
  --LEVEL-C-2:  ;
  --touched-C-2: + 0s;
}
.container .touch31:active ~ .layer31 {
  --state31: running;
  --start-C: paused;
}
.container .touch31:checked ~ .layer31 {
  --checked-C-2: initial;
  --LEVEL-C-1:  ;
  --LEVEL-C-2: initial;
  --touched-C-2: + 0.25s;
}
.container .layer31 {
  -webkit-animation: touch-C-2 2s var(--state31) linear forwards;
          animation: touch-C-2 2s var(--state31) linear forwards;
}
.container .touch30 ~ .layer30 {
  --state30: paused;
  --checked-C-3:  ;
  --LEVEL-C-3:  ;
  --touched-C-3: + 0s;
}
.container .touch30:active ~ .layer30 {
  --state30: running;
  --start-C: paused;
}
.container .touch30:checked ~ .layer30 {
  --checked-C-3: initial;
  --LEVEL-C-2:  ;
  --LEVEL-C-3: initial;
  --touched-C-3: + 0.25s;
}
.container .layer30 {
  -webkit-animation: touch-C-3 2s var(--state30) linear forwards;
          animation: touch-C-3 2s var(--state30) linear forwards;
}
.container .touch29 ~ .layer29 {
  --state29: paused;
  --checked-C-4:  ;
  --LEVEL-C-4:  ;
  --touched-C-4: + 0s;
}
.container .touch29:active ~ .layer29 {
  --state29: running;
  --start-C: paused;
}
.container .touch29:checked ~ .layer29 {
  --checked-C-4: initial;
  --LEVEL-C-3:  ;
  --LEVEL-C-4: initial;
  --touched-C-4: + 0.25s;
}
.container .layer29 {
  -webkit-animation: touch-C-4 2s var(--state29) linear forwards;
          animation: touch-C-4 2s var(--state29) linear forwards;
}
.container .layer29.end {
  --touched-C: calc(2s var(--touched-C-1) var(--touched-C-2) var(--touched-C-3) var(--touched-C-4));
  -webkit-animation: touch-C-4 2s var(--state29) linear forwards, enable var(--touched-C) var(--start-C) linear forwards;
          animation: touch-C-4 2s var(--state29) linear forwards, enable var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end::before {
  -webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards;
          animation: reveal var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end > .start {
  -webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards;
          animation: reveal var(--touched-C) var(--start-C) linear forwards;
}
.container .layer29.end > .timer {
  -webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards, expire var(--touched-C) var(--start-C) linear;
          animation: reveal var(--touched-B) var(--start-B) linear forwards, expire var(--touched-C) var(--start-C) linear;
}
.container .layer29.end > .timer::before {
  -webkit-animation: flash var(--touched-C) var(--start-C) linear backwards;
          animation: flash var(--touched-C) var(--start-C) linear backwards;
}
.container .layer29.end > .clear {
  -webkit-animation: reveal var(--touched-B) var(--start-B) linear forwards, disable var(--touched-C) var(--start-C) linear backwards;
          animation: reveal var(--touched-B) var(--start-B) linear forwards, disable var(--touched-C) var(--start-C) linear backwards;
}
.container .touch28.start ~ .layer28 {
  --start-D: paused;
}
.container .touch28.start:checked ~ .layer28 {
  --start-D: running;
}
.container .touch28 ~ .layer28 {
  --state28: paused;
  --checked-D-1:  ;
  --LEVEL-D-1:  ;
  --touched-D-1: + 0s;
}
.container .touch28:active ~ .layer28 {
  --state28: running;
  --start-D: paused;
}
.container .touch28:checked ~ .layer28 {
  --checked-D-1: initial;
  --LEVEL-D-0:  ;
  --LEVEL-D-1: initial;
  --touched-D-1: + 0.25s;
}
.container .layer28 {
  -webkit-animation: touch-D-1 2s var(--state28) linear forwards;
          animation: touch-D-1 2s var(--state28) linear forwards;
}
.container .touch27 ~ .layer27 {
  --state27: paused;
  --checked-D-2:  ;
  --LEVEL-D-2:  ;
  --touched-D-2: + 0s;
}
.container .touch27:active ~ .layer27 {
  --state27: running;
  --start-D: paused;
}
.container .touch27:checked ~ .layer27 {
  --checked-D-2: initial;
  --LEVEL-D-1:  ;
  --LEVEL-D-2: initial;
  --touched-D-2: + 0.25s;
}
.container .layer27 {
  -webkit-animation: touch-D-2 2s var(--state27) linear forwards;
          animation: touch-D-2 2s var(--state27) linear forwards;
}
.container .touch26 ~ .layer26 {
  --state26: paused;
  --checked-D-3:  ;
  --LEVEL-D-3:  ;
  --touched-D-3: + 0s;
}
.container .touch26:active ~ .layer26 {
  --state26: running;
  --start-D: paused;
}
.container .touch26:checked ~ .layer26 {
  --checked-D-3: initial;
  --LEVEL-D-2:  ;
  --LEVEL-D-3: initial;
  --touched-D-3: + 0.25s;
}
.container .layer26 {
  -webkit-animation: touch-D-3 2s var(--state26) linear forwards;
          animation: touch-D-3 2s var(--state26) linear forwards;
}
.container .touch25 ~ .layer25 {
  --state25: paused;
  --checked-D-4:  ;
  --LEVEL-D-4:  ;
  --touched-D-4: + 0s;
}
.container .touch25:active ~ .layer25 {
  --state25: running;
  --start-D: paused;
}
.container .touch25:checked ~ .layer25 {
  --checked-D-4: initial;
  --LEVEL-D-3:  ;
  --LEVEL-D-4: initial;
  --touched-D-4: + 0.25s;
}
.container .layer25 {
  -webkit-animation: touch-D-4 2s var(--state25) linear forwards;
          animation: touch-D-4 2s var(--state25) linear forwards;
}
.container .layer25.end {
  --touched-D: calc(2s var(--touched-D-1) var(--touched-D-2) var(--touched-D-3) var(--touched-D-4));
  -webkit-animation: touch-D-4 2s var(--state25) linear forwards, enable var(--touched-D) var(--start-D) linear forwards;
          animation: touch-D-4 2s var(--state25) linear forwards, enable var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end::before {
  -webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards;
          animation: reveal var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end > .start {
  -webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards;
          animation: reveal var(--touched-D) var(--start-D) linear forwards;
}
.container .layer25.end > .timer {
  -webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards, expire var(--touched-D) var(--start-D) linear;
          animation: reveal var(--touched-C) var(--start-C) linear forwards, expire var(--touched-D) var(--start-D) linear;
}
.container .layer25.end > .timer::before {
  -webkit-animation: flash var(--touched-D) var(--start-D) linear backwards;
          animation: flash var(--touched-D) var(--start-D) linear backwards;
}
.container .layer25.end > .clear {
  -webkit-animation: reveal var(--touched-C) var(--start-C) linear forwards, disable var(--touched-D) var(--start-D) linear backwards;
          animation: reveal var(--touched-C) var(--start-C) linear forwards, disable var(--touched-D) var(--start-D) linear backwards;
}
.container .touch24.start ~ .layer24 {
  --start-E: paused;
}
.container .touch24.start:checked ~ .layer24 {
  --start-E: running;
}
.container .touch24 ~ .layer24 {
  --state24: paused;
  --checked-E-1:  ;
  --LEVEL-E-1:  ;
  --touched-E-1: + 0s;
}
.container .touch24:active ~ .layer24 {
  --state24: running;
  --start-E: paused;
}
.container .touch24:checked ~ .layer24 {
  --checked-E-1: initial;
  --LEVEL-E-0:  ;
  --LEVEL-E-1: initial;
  --touched-E-1: + 0.25s;
}
.container .layer24 {
  -webkit-animation: touch-E-1 2s var(--state24) linear forwards;
          animation: touch-E-1 2s var(--state24) linear forwards;
}
.container .touch23 ~ .layer23 {
  --state23: paused;
  --checked-E-2:  ;
  --LEVEL-E-2:  ;
  --touched-E-2: + 0s;
}
.container .touch23:active ~ .layer23 {
  --state23: running;
  --start-E: paused;
}
.container .touch23:checked ~ .layer23 {
  --checked-E-2: initial;
  --LEVEL-E-1:  ;
  --LEVEL-E-2: initial;
  --touched-E-2: + 0.25s;
}
.container .layer23 {
  -webkit-animation: touch-E-2 2s var(--state23) linear forwards;
          animation: touch-E-2 2s var(--state23) linear forwards;
}
.container .touch22 ~ .layer22 {
  --state22: paused;
  --checked-E-3:  ;
  --LEVEL-E-3:  ;
  --touched-E-3: + 0s;
}
.container .touch22:active ~ .layer22 {
  --state22: running;
  --start-E: paused;
}
.container .touch22:checked ~ .layer22 {
  --checked-E-3: initial;
  --LEVEL-E-2:  ;
  --LEVEL-E-3: initial;
  --touched-E-3: + 0.25s;
}
.container .layer22 {
  -webkit-animation: touch-E-3 2s var(--state22) linear forwards;
          animation: touch-E-3 2s var(--state22) linear forwards;
}
.container .touch21 ~ .layer21 {
  --state21: paused;
  --checked-E-4:  ;
  --LEVEL-E-4:  ;
  --touched-E-4: + 0s;
}
.container .touch21:active ~ .layer21 {
  --state21: running;
  --start-E: paused;
}
.container .touch21:checked ~ .layer21 {
  --checked-E-4: initial;
  --LEVEL-E-3:  ;
  --LEVEL-E-4: initial;
  --touched-E-4: + 0.25s;
}
.container .layer21 {
  -webkit-animation: touch-E-4 2s var(--state21) linear forwards;
          animation: touch-E-4 2s var(--state21) linear forwards;
}
.container .layer21.end {
  --touched-E: calc(2s var(--touched-E-1) var(--touched-E-2) var(--touched-E-3) var(--touched-E-4));
  -webkit-animation: touch-E-4 2s var(--state21) linear forwards, enable var(--touched-E) var(--start-E) linear forwards;
          animation: touch-E-4 2s var(--state21) linear forwards, enable var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end::before {
  -webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards;
          animation: reveal var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end > .start {
  -webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards;
          animation: reveal var(--touched-E) var(--start-E) linear forwards;
}
.container .layer21.end > .timer {
  -webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards, expire var(--touched-E) var(--start-E) linear;
          animation: reveal var(--touched-D) var(--start-D) linear forwards, expire var(--touched-E) var(--start-E) linear;
}
.container .layer21.end > .timer::before {
  -webkit-animation: flash var(--touched-E) var(--start-E) linear backwards;
          animation: flash var(--touched-E) var(--start-E) linear backwards;
}
.container .layer21.end > .clear {
  -webkit-animation: reveal var(--touched-D) var(--start-D) linear forwards, disable var(--touched-E) var(--start-E) linear backwards;
          animation: reveal var(--touched-D) var(--start-D) linear forwards, disable var(--touched-E) var(--start-E) linear backwards;
}
.container .touch20.start ~ .layer20 {
  --start-F: paused;
}
.container .touch20.start:checked ~ .layer20 {
  --start-F: running;
}
.container .touch20 ~ .layer20 {
  --state20: paused;
  --checked-F-1:  ;
  --LEVEL-F-1:  ;
  --touched-F-1: + 0s;
}
.container .touch20:active ~ .layer20 {
  --state20: running;
  --start-F: paused;
}
.container .touch20:checked ~ .layer20 {
  --checked-F-1: initial;
  --LEVEL-F-0:  ;
  --LEVEL-F-1: initial;
  --touched-F-1: + 0.25s;
}
.container .layer20 {
  -webkit-animation: touch-F-1 2s var(--state20) linear forwards;
          animation: touch-F-1 2s var(--state20) linear forwards;
}
.container .touch19 ~ .layer19 {
  --state19: paused;
  --checked-F-2:  ;
  --LEVEL-F-2:  ;
  --touched-F-2: + 0s;
}
.container .touch19:active ~ .layer19 {
  --state19: running;
  --start-F: paused;
}
.container .touch19:checked ~ .layer19 {
  --checked-F-2: initial;
  --LEVEL-F-1:  ;
  --LEVEL-F-2: initial;
  --touched-F-2: + 0.25s;
}
.container .layer19 {
  -webkit-animation: touch-F-2 2s var(--state19) linear forwards;
          animation: touch-F-2 2s var(--state19) linear forwards;
}
.container .touch18 ~ .layer18 {
  --state18: paused;
  --checked-F-3:  ;
  --LEVEL-F-3:  ;
  --touched-F-3: + 0s;
}
.container .touch18:active ~ .layer18 {
  --state18: running;
  --start-F: paused;
}
.container .touch18:checked ~ .layer18 {
  --checked-F-3: initial;
  --LEVEL-F-2:  ;
  --LEVEL-F-3: initial;
  --touched-F-3: + 0.25s;
}
.container .layer18 {
  -webkit-animation: touch-F-3 2s var(--state18) linear forwards;
          animation: touch-F-3 2s var(--state18) linear forwards;
}
.container .touch17 ~ .layer17 {
  --state17: paused;
  --checked-F-4:  ;
  --LEVEL-F-4:  ;
  --touched-F-4: + 0s;
}
.container .touch17:active ~ .layer17 {
  --state17: running;
  --start-F: paused;
}
.container .touch17:checked ~ .layer17 {
  --checked-F-4: initial;
  --LEVEL-F-3:  ;
  --LEVEL-F-4: initial;
  --touched-F-4: + 0.25s;
}
.container .layer17 {
  -webkit-animation: touch-F-4 2s var(--state17) linear forwards;
          animation: touch-F-4 2s var(--state17) linear forwards;
}
.container .layer17.end {
  --touched-F: calc(2s var(--touched-F-1) var(--touched-F-2) var(--touched-F-3) var(--touched-F-4));
  -webkit-animation: touch-F-4 2s var(--state17) linear forwards, enable var(--touched-F) var(--start-F) linear forwards;
          animation: touch-F-4 2s var(--state17) linear forwards, enable var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end::before {
  -webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards;
          animation: reveal var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end > .start {
  -webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards;
          animation: reveal var(--touched-F) var(--start-F) linear forwards;
}
.container .layer17.end > .timer {
  -webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards, expire var(--touched-F) var(--start-F) linear;
          animation: reveal var(--touched-E) var(--start-E) linear forwards, expire var(--touched-F) var(--start-F) linear;
}
.container .layer17.end > .timer::before {
  -webkit-animation: flash var(--touched-F) var(--start-F) linear backwards;
          animation: flash var(--touched-F) var(--start-F) linear backwards;
}
.container .layer17.end > .clear {
  -webkit-animation: reveal var(--touched-E) var(--start-E) linear forwards, disable var(--touched-F) var(--start-F) linear backwards;
          animation: reveal var(--touched-E) var(--start-E) linear forwards, disable var(--touched-F) var(--start-F) linear backwards;
}
.container .touch16.start ~ .layer16 {
  --start-G: paused;
}
.container .touch16.start:checked ~ .layer16 {
  --start-G: running;
}
.container .touch16 ~ .layer16 {
  --state16: paused;
  --checked-G-1:  ;
  --LEVEL-G-1:  ;
  --touched-G-1: + 0s;
}
.container .touch16:active ~ .layer16 {
  --state16: running;
  --start-G: paused;
}
.container .touch16:checked ~ .layer16 {
  --checked-G-1: initial;
  --LEVEL-G-0:  ;
  --LEVEL-G-1: initial;
  --touched-G-1: + 0.25s;
}
.container .layer16 {
  -webkit-animation: touch-G-1 2s var(--state16) linear forwards;
          animation: touch-G-1 2s var(--state16) linear forwards;
}
.container .touch15 ~ .layer15 {
  --state15: paused;
  --checked-G-2:  ;
  --LEVEL-G-2:  ;
  --touched-G-2: + 0s;
}
.container .touch15:active ~ .layer15 {
  --state15: running;
  --start-G: paused;
}
.container .touch15:checked ~ .layer15 {
  --checked-G-2: initial;
  --LEVEL-G-1:  ;
  --LEVEL-G-2: initial;
  --touched-G-2: + 0.25s;
}
.container .layer15 {
  -webkit-animation: touch-G-2 2s var(--state15) linear forwards;
          animation: touch-G-2 2s var(--state15) linear forwards;
}
.container .touch14 ~ .layer14 {
  --state14: paused;
  --checked-G-3:  ;
  --LEVEL-G-3:  ;
  --touched-G-3: + 0s;
}
.container .touch14:active ~ .layer14 {
  --state14: running;
  --start-G: paused;
}
.container .touch14:checked ~ .layer14 {
  --checked-G-3: initial;
  --LEVEL-G-2:  ;
  --LEVEL-G-3: initial;
  --touched-G-3: + 0.25s;
}
.container .layer14 {
  -webkit-animation: touch-G-3 2s var(--state14) linear forwards;
          animation: touch-G-3 2s var(--state14) linear forwards;
}
.container .touch13 ~ .layer13 {
  --state13: paused;
  --checked-G-4:  ;
  --LEVEL-G-4:  ;
  --touched-G-4: + 0s;
}
.container .touch13:active ~ .layer13 {
  --state13: running;
  --start-G: paused;
}
.container .touch13:checked ~ .layer13 {
  --checked-G-4: initial;
  --LEVEL-G-3:  ;
  --LEVEL-G-4: initial;
  --touched-G-4: + 0.25s;
}
.container .layer13 {
  -webkit-animation: touch-G-4 2s var(--state13) linear forwards;
          animation: touch-G-4 2s var(--state13) linear forwards;
}
.container .layer13.end {
  --touched-G: calc(2s var(--touched-G-1) var(--touched-G-2) var(--touched-G-3) var(--touched-G-4));
  -webkit-animation: touch-G-4 2s var(--state13) linear forwards, enable var(--touched-G) var(--start-G) linear forwards;
          animation: touch-G-4 2s var(--state13) linear forwards, enable var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end::before {
  -webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards;
          animation: reveal var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end > .start {
  -webkit-animation: reveal var(--touched-G) var(--start-G) linear forwards;
          animation: reveal var(--touched-G) var(--start-G) linear forwards;
}
.container .layer13.end > .timer {
  -webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards, expire var(--touched-G) var(--start-G) linear;
          animation: reveal var(--touched-F) var(--start-F) linear forwards, expire var(--touched-G) var(--start-G) linear;
}
.container .layer13.end > .timer::before {
  -webkit-animation: flash var(--touched-G) var(--start-G) linear backwards;
          animation: flash var(--touched-G) var(--start-G) linear backwards;
}
.container .layer13.end > .clear {
  -webkit-animation: reveal var(--touched-F) var(--start-F) linear forwards, disable var(--touched-G) var(--start-G) linear backwards;
          animation: reveal var(--touched-F) var(--start-F) linear forwards, disable var(--touched-G) var(--start-G) linear backwards;
}
.container .touch12.start ~ .layer12 {
  --start-H: paused;
}
.container .touch12.start:checked ~ .layer12 {
  --start-H: running;
}
.container .touch12 ~ .layer12 {
  --state12: paused;
  --checked-H-1:  ;
  --LEVEL-H-1:  ;
  --touched-H-1: + 0s;
}
.container .touch12:active ~ .layer12 {
  --state12: running;
  --start-H: paused;
}
.container .touch12:checked ~ .layer12 {
  --checked-H-1: initial;
  --LEVEL-H-0:  ;
  --LEVEL-H-1: initial;
  --touched-H-1: + 0.25s;
}
.container .layer12 {
  -webkit-animation: touch-H-1 2s var(--state12) linear forwards;
          animation: touch-H-1 2s var(--state12) linear forwards;
}
.container .touch11 ~ .layer11 {
  --state11: paused;
  --checked-H-2:  ;
  --LEVEL-H-2:  ;
  --touched-H-2: + 0s;
}
.container .touch11:active ~ .layer11 {
  --state11: running;
  --start-H: paused;
}
.container .touch11:checked ~ .layer11 {
  --checked-H-2: initial;
  --LEVEL-H-1:  ;
  --LEVEL-H-2: initial;
  --touched-H-2: + 0.25s;
}
.container .layer11 {
  -webkit-animation: touch-H-2 2s var(--state11) linear forwards;
          animation: touch-H-2 2s var(--state11) linear forwards;
}
.container .touch10 ~ .layer10 {
  --state10: paused;
  --checked-H-3:  ;
  --LEVEL-H-3:  ;
  --touched-H-3: + 0s;
}
.container .touch10:active ~ .layer10 {
  --state10: running;
  --start-H: paused;
}
.container .touch10:checked ~ .layer10 {
  --checked-H-3: initial;
  --LEVEL-H-2:  ;
  --LEVEL-H-3: initial;
  --touched-H-3: + 0.25s;
}
.container .layer10 {
  -webkit-animation: touch-H-3 2s var(--state10) linear forwards;
          animation: touch-H-3 2s var(--state10) linear forwards;
}
.container .touch9 ~ .layer9 {
  --state9: paused;
  --checked-H-4:  ;
  --LEVEL-H-4:  ;
  --touched-H-4: + 0s;
}
.container .touch9:active ~ .layer9 {
  --state9: running;
  --start-H: paused;
}
.container .touch9:checked ~ .layer9 {
  --checked-H-4: initial;
  --LEVEL-H-3:  ;
  --LEVEL-H-4: initial;
  --touched-H-4: + 0.25s;
}
.container .layer9 {
  -webkit-animation: touch-H-4 2s var(--state9) linear forwards;
          animation: touch-H-4 2s var(--state9) linear forwards;
}
.container .layer9.end {
  --touched-H: calc(2s var(--touched-H-1) var(--touched-H-2) var(--touched-H-3) var(--touched-H-4));
  -webkit-animation: touch-H-4 2s var(--state9) linear forwards, enable var(--touched-H) var(--start-H) linear forwards;
          animation: touch-H-4 2s var(--state9) linear forwards, enable var(--touched-H) var(--start-H) linear forwards;
}
.container .layer9.end::before {
  -webkit-animation: reveal var(--touched-H) var(--start-H) linear forwards;
          animation: reveal var(--touched-H) var(--start-H) linear forwards;
}
.container .layer9.end > .start {
  -webkit-animation: reveal var(--touched-.........完整代码请登录后点击上方下载按钮下载查看