div+css实现一个摩斯密码翻译器代码
代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0