css数字组建动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>- Procedurally Generated CSS Numbers</title> <style> body { background: #222; --color1: #ccd8eb; --color2: #3079e2; --bg: transparent; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; min-width: 900px; font-family: 'Roboto Mono', monospace; } body .reset { position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%) scaleX(0); transform: translateX(-50%) scaleX(0); color: #fff; font-weight: 100; font-size: 12px; letter-spacing: 2px; cursor: pointer; background: transparent; border: none; font-family: 'Roboto Mono', monospace; outline: none; transition: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } body .reset:hover:after { -webkit-transform: scaleX(1); transform: scaleX(1); } body .reset:after { content: ''; position: absolute; width: 100%; height: 1px; background: var(--color1); bottom: -5px; left: 0; transition: 0.3s cubic-bezier(1, 0, 0, 1); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } body.two .last { display: none; } body.two #wrap { width: 600px; } body.active .reset { -webkit-transform: translateX(-50%) scaleX(1); transform: translateX(-50%) scaleX(1); transition-delay: 3s; } body.active #wrap { opacity: 1; } body.active #formwrap { opacity: 0; } body #formwrap { position: absolute; width: 100vw; z-index: 999; text-align: center; transition: 0.3s ease-in-out; left: 0; } body #formwrap form { display: inline-block; } body #formwrap form input[type=number]::-webkit-inner-spin-button, body #formwrap form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body #formwrap form input[type="number"] { font-family: 'Roboto Mono', monospace; background: transparent; border: none; border-bottom: 1px solid var(--color2); height: auto; text-align: center; outline: none; width: 25vmin; color: var(--color2); font-size: 10vmin; line-height: 1; padding: 1rem 0; } body #formwrap form input[type="number"]:hover, body #formwrap form input[type="number"]:focus { outline: none; } body #formwrap form input[type="number"]:focus::-webkit-input-placeholder { opacity: 0; } body #formwrap form input[type="number"]:focus:-ms-input-placeholder { opacity: 0; } body #formwrap form input[type="number"]:focus::-ms-input-placeholder { opacity: 0; } body #formwrap form input[type="number"]:focus::placeholder { opacity: 0; } body #formwrap form input[type="number"]::-webkit-input-placeholder { color: #666; font-size: 5vmin; opacity: 1; } body #formwrap form input[type="number"]:-ms-input-placeholder { color: #666; font-size: 5vmin; opacity: 1; } body #formwrap form input[type="number"]::-ms-input-placeholder { color: #666; font-size: 5vmin; opacity: 1; } body #formwrap form input[type="number"]::placeholder { color: #666; font-size: 5vmin; opacity: 1; } body #formwrap form input[type="submit"] { opacity: 1; color: var(--color2); background: transparent; border: 1px solid; font-size: 5vmin; width: 25vmin; text-align: center; margin-top: 5vmin; transition: 0.3s ease-in-out; cursor: pointer; } body #formwrap form input[type="submit"]:hover { color: var(--color1); } body #wrap { width: 900px; height: 600px; display: flex; flex-wrap: wrap; background: #222; opacity: 0; } body #wrap.loading { -webkit-animation: fadeIn 0.5s ease-in-out 1 forwards; animation: fadeIn 0.5s ease-in-out 1 forwards; opacity: 0; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body #wrap:not(.loading) .number .cell:nth-of-type(1) { -webkit-animation-delay: 0.02s !important; animation-delay: 0.02s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(2) { -webkit-animation-delay: 0.04s !important; animation-delay: 0.04s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(3) { -webkit-animation-delay: 0.06s !important; animation-delay: 0.06s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(4) { -webkit-animation-delay: 0.08s !important; animation-delay: 0.08s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(5) { -webkit-animation-delay: 0.1s !important; animation-delay: 0.1s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(6) { -webkit-animation-delay: 0.12s !important; animation-delay: 0.12s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(7) { -webkit-animation-delay: 0.14s !important; animation-delay: 0.14s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(8) { -webkit-animation-delay: 0.16s !important; animation-delay: 0.16s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(9) { -webkit-animation-delay: 0.18s !important; animation-delay: 0.18s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(10) { -webkit-animation-delay: 0.2s !important; animation-delay: 0.2s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(11) { -webkit-animation-delay: 0.22s !important; animation-delay: 0.22s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(12) { -webkit-animation-delay: 0.24s !important; animation-delay: 0.24s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(13) { -webkit-animation-delay: 0.26s !important; animation-delay: 0.26s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(14) { -webkit-animation-delay: 0.28s !important; animation-delay: 0.28s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(15) { -webkit-animation-delay: 0.3s !important; animation-delay: 0.3s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(16) { -webkit-animation-delay: 0.32s !important; animation-delay: 0.32s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(17) { -webkit-animation-delay: 0.34s !important; animation-delay: 0.34s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(18) { -webkit-animation-delay: 0.36s !important; animation-delay: 0.36s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(19) { -webkit-animation-delay: 0.38s !important; animation-delay: 0.38s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(20) { -webkit-animation-delay: 0.4s !important; animation-delay: 0.4s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(21) { -webkit-animation-delay: 0.42s !important; animation-delay: 0.42s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(22) { -webkit-animation-delay: 0.44s !important; animation-delay: 0.44s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(23) { -webkit-animation-delay: 0.46s !important; animation-delay: 0.46s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(24) { -webkit-animation-delay: 0.48s !important; animation-delay: 0.48s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(25) { -webkit-animation-delay: 0.5s !important; animation-delay: 0.5s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(26) { -webkit-animation-delay: 0.52s !important; animation-delay: 0.52s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(27) { -webkit-animation-delay: 0.54s !important; animation-delay: 0.54s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(28) { -webkit-animation-delay: 0.56s !important; animation-delay: 0.56s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(29) { -webkit-animation-delay: 0.58s !important; animation-delay: 0.58s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(30) { -webkit-animation-delay: 0.6s !important; animation-delay: 0.6s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(31) { -webkit-animation-delay: 0.62s !important; animation-delay: 0.62s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(32) { -webkit-animation-delay: 0.64s !important; animation-delay: 0.64s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(33) { -webkit-animation-delay: 0.66s !important; animation-delay: 0.66s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(34) { -webkit-animation-delay: 0.68s !important; animation-delay: 0.68s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(35) { -webkit-animation-delay: 0.7s !important; animation-delay: 0.7s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(36) { -webkit-animation-delay: 0.72s !important; animation-delay: 0.72s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(37) { -webkit-animation-delay: 0.74s !important; animation-delay: 0.74s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(38) { -webkit-animation-delay: 0.76s !important; animation-delay: 0.76s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(39) { -webkit-animation-delay: 0.78s !important; animation-delay: 0.78s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(40) { -webkit-animation-delay: 0.8s !important; animation-delay: 0.8s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(41) { -webkit-animation-delay: 0.82s !important; animation-delay: 0.82s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(42) { -webkit-animation-delay: 0.84s !important; animation-delay: 0.84s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(43) { -webkit-animation-delay: 0.86s !important; animation-delay: 0.86s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(44) { -webkit-animation-delay: 0.88s !important; animation-delay: 0.88s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(45) { -webkit-animation-delay: 0.9s !important; animation-delay: 0.9s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(46) { -webkit-animation-delay: 0.92s !important; animation-delay: 0.92s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(47) { -webkit-animation-delay: 0.94s !important; animation-delay: 0.94s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(48) { -webkit-animation-delay: 0.96s !important; animation-delay: 0.96s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(49) { -webkit-animation-delay: 0.98s !important; animation-delay: 0.98s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(50) { -webkit-animation-delay: 1s !important; animation-delay: 1s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(51) { -webkit-animation-delay: 1.02s !important; animation-delay: 1.02s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(52) { -webkit-animation-delay: 1.04s !important; animation-delay: 1.04s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(53) { -webkit-animation-delay: 1.06s !important; animation-delay: 1.06s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(54) { -webkit-animation-delay: 1.08s !important; animation-delay: 1.08s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(55) { -webkit-animation-delay: 1.1s !important; animation-delay: 1.1s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(56) { -webkit-animation-delay: 1.12s !important; animation-delay: 1.12s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(57) { -webkit-animation-delay: 1.14s !important; animation-delay: 1.14s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(58) { -webkit-animation-delay: 1.16s !important; animation-delay: 1.16s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(59) { -webkit-animation-delay: 1.18s !important; animation-delay: 1.18s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(60) { -webkit-animation-delay: 1.2s !important; animation-delay: 1.2s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(61) { -webkit-animation-delay: 1.22s !important; animation-delay: 1.22s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(62) { -webkit-animation-delay: 1.24s !important; animation-delay: 1.24s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(63) { -webkit-animation-delay: 1.26s !important; animation-delay: 1.26s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(64) { -webkit-animation-delay: 1.28s !important; animation-delay: 1.28s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(65) { -webkit-animation-delay: 1.3s !important; animation-delay: 1.3s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(66) { -webkit-animation-delay: 1.32s !important; animation-delay: 1.32s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(67) { -webkit-animation-delay: 1.34s !important; animation-delay: 1.34s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(68) { -webkit-animation-delay: 1.36s !important; animation-delay: 1.36s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(69) { -webkit-animation-delay: 1.38s !important; animation-delay: 1.38s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(70) { -webkit-animation-delay: 1.4s !important; animation-delay: 1.4s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(71) { -webkit-animation-delay: 1.42s !important; animation-delay: 1.42s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(72) { -webkit-animation-delay: 1.44s !important; animation-delay: 1.44s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(73) { -webkit-animation-delay: 1.46s !important; animation-delay: 1.46s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(74) { -webkit-animation-delay: 1.48s !important; animation-delay: 1.48s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(75) { -webkit-animation-delay: 1.5s !important; animation-delay: 1.5s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(76) { -webkit-animation-delay: 1.52s !important; animation-delay: 1.52s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(77) { -webkit-animation-delay: 1.54s !important; animation-delay: 1.54s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(78) { -webkit-animation-delay: 1.56s !important; animation-delay: 1.56s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(79) { -webkit-animation-delay: 1.58s !important; animation-delay: 1.58s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(80) { -webkit-animation-delay: 1.6s !important; animation-delay: 1.6s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(81) { -webkit-animation-delay: 1.62s !important; animation-delay: 1.62s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(82) { -webkit-animation-delay: 1.64s !important; animation-delay: 1.64s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(83) { -webkit-animation-delay: 1.66s !important; animation-delay: 1.66s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(84) { -webkit-animation-delay: 1.68s !important; animation-delay: 1.68s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(85) { -webkit-animation-delay: 1.7s !important; animation-delay: 1.7s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(86) { -webkit-animation-delay: 1.72s !important; animation-delay: 1.72s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(87) { -webkit-animation-delay: 1.74s !important; animation-delay: 1.74s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(88) { -webkit-animation-delay: 1.76s !important; animation-delay: 1.76s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(89) { -webkit-animation-delay: 1.78s !important; animation-delay: 1.78s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(90) { -webkit-animation-delay: 1.8s !important; animation-delay: 1.8s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(91) { -webkit-animation-delay: 1.82s !important; animation-delay: 1.82s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(92) { -webkit-animation-delay: 1.84s !important; animation-delay: 1.84s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(93) { -webkit-animation-delay: 1.86s !important; animation-delay: 1.86s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(94) { -webkit-animation-delay: 1.88s !important; animation-delay: 1.88s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(95) { -webkit-animation-delay: 1.9s !important; animation-delay: 1.9s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(96) { -webkit-animation-delay: 1.92s !important; animation-delay: 1.92s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(97) { -webkit-animation-delay: 1.94s !important; animation-delay: 1.94s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(98) { -webkit-animation-delay: 1.96s !important; animation-delay: 1.96s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(99) { -webkit-animation-delay: 1.98s !important; animation-delay: 1.98s !important; } body #wrap:not(.loading) .number .cell:nth-of-type(100) { -webkit-animation-delay: 2s !important; animation-delay: 2s !important; } body #wrap:not(.loading) .number.number0 .cell, body #wrap:not(.loading) .number.number1 .cell, body #wrap:not(.loading) .number.number2 .cell, body #wrap:not(.loading) .number.number3 .cell, body #wrap:not(.loading) .number.number4 .cell, body #wrap:not(.loading) .number.number5 .cell, body #wrap:not(.loading) .number.number6 .cell, body #wrap:not(.loading) .number.number8 .cell, body #wrap:not(.loading) .number.number9 .cell { -webkit-animation: clip-in 1s ease-in-out 1 forwards; animation: clip-in 1s ease-in-out 1 forwards; } @-webkit-keyframes clip-in { 0% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 75% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } @keyframes clip-in { 0% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 75% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } body #wrap:not(.loading) .number.number0 .cell:nth-of-type(n+45) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number1 .cell:nth-of-type(n+32) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number2 .cell:nth-of-type(n+40) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number3 .cell:nth-of-type(n+42), body #wrap:not(.loading) .number.number4 .cell:nth-of-type(n+42) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number5 .cell:nth-of-type(n+41) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number6 .cell:nth-of-type(n+48), body #wrap:not(.loading) .number.number9 .cell:nth-of-type(n+48) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number7 .cell:nth-of-type(n+31) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.number8 .cell:nth-of-type(n+51) { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.drawout .cell { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(1) { -webkit-animation-delay: 1.77s !important; animation-delay: 1.77s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(2) { -webkit-animation-delay: 1.79s !important; animation-delay: 1.79s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(3) { -webkit-animation-delay: 1.81s !important; animation-delay: 1.81s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(4) { -webkit-animation-delay: 1.83s !important; animation-delay: 1.83s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(5) { -webkit-animation-delay: 1.85s !important; animation-delay: 1.85s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(6) { -webkit-animation-delay: 1.87s !important; animation-delay: 1.87s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(7) { -webkit-animation-delay: 1.89s !important; animation-delay: 1.89s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(8) { -webkit-animation-delay: 1.91s !important; animation-delay: 1.91s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(9) { -webkit-animation-delay: 1.93s !important; animation-delay: 1.93s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(10) { -webkit-animation-delay: 1.95s !important; animation-delay: 1.95s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(11) { -webkit-animation-delay: 1.97s !important; animation-delay: 1.97s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(12) { -webkit-animation-delay: 1.99s !important; animation-delay: 1.99s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(13) { -webkit-animation-delay: 2.01s !important; animation-delay: 2.01s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(14) { -webkit-animation-delay: 2.03s !important; animation-delay: 2.03s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(15) { -webkit-animation-delay: 2.05s !important; animation-delay: 2.05s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(16) { -webkit-animation-delay: 2.07s !important; animation-delay: 2.07s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(17) { -webkit-animation-delay: 2.09s !important; animation-delay: 2.09s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(18) { -webkit-animation-delay: 2.11s !important; animation-delay: 2.11s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(19) { -webkit-animation-delay: 2.13s !important; animation-delay: 2.13s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(20) { -webkit-animation-delay: 2.15s !important; animation-delay: 2.15s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(21) { -webkit-animation-delay: 2.17s !important; animation-delay: 2.17s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(22) { -webkit-animation-delay: 2.19s !important; animation-delay: 2.19s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(23) { -webkit-animation-delay: 2.21s !important; animation-delay: 2.21s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(24) { -webkit-animation-delay: 2.23s !important; animation-delay: 2.23s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(25) { -webkit-animation-delay: 2.25s !important; animation-delay: 2.25s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(26) { -webkit-animation-delay: 2.27s !important; animation-delay: 2.27s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(27) { -webkit-animation-delay: 2.29s !important; animation-delay: 2.29s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(28) { -webkit-animation-delay: 2.31s !important; animation-delay: 2.31s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(29) { -webkit-animation-delay: 2.33s !important; animation-delay: 2.33s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(30) { -webkit-animation-delay: 2.35s !important; animation-delay: 2.35s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(31) { -webkit-animation-delay: 2.37s !important; animation-delay: 2.37s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(32) { -webkit-animation-delay: 2.39s !important; animation-delay: 2.39s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(33) { -webkit-animation-delay: 2.41s !important; animation-delay: 2.41s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(34) { -webkit-animation-delay: 2.43s !important; animation-delay: 2.43s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(35) { -webkit-animation-delay: 2.45s !important; animation-delay: 2.45s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(36) { -webkit-animation-delay: 2.47s !important; animation-delay: 2.47s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(37) { -webkit-animation-delay: 2.49s !important; animation-delay: 2.49s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(38) { -webkit-animation-delay: 2.51s !important; animation-delay: 2.51s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(39) { -webkit-animation-delay: 2.53s !important; animation-delay: 2.53s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(40) { -webkit-animation-delay: 2.55s !important; animation-delay: 2.55s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(41) { -webkit-animation-delay: 2.57s !important; animation-delay: 2.57s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(42) { -webkit-animation-delay: 2.59s !important; animation-delay: 2.59s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(43) { -webkit-animation-delay: 2.61s !important; animation-delay: 2.61s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(44) { -webkit-animation-delay: 2.63s !important; animation-delay: 2.63s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(45) { -webkit-animation-delay: 2.65s !important; animation-delay: 2.65s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(46) { -webkit-animation-delay: 2.67s !important; animation-delay: 2.67s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(47) { -webkit-animation-delay: 2.69s !important; animation-delay: 2.69s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(48) { -webkit-animation-delay: 2.71s !important; animation-delay: 2.71s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(49) { -webkit-animation-delay: 2.73s !important; animation-delay: 2.73s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(50) { -webkit-animation-delay: 2.75s !important; animation-delay: 2.75s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(51) { -webkit-animation-delay: 2.77s !important; animation-delay: 2.77s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(52) { -webkit-animation-delay: 2.79s !important; animation-delay: 2.79s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(53) { -webkit-animation-delay: 2.81s !important; animation-delay: 2.81s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(54) { -webkit-animation-delay: 2.83s !important; animation-delay: 2.83s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(55) { -webkit-animation-delay: 2.85s !important; animation-delay: 2.85s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(56) { -webkit-animation-delay: 2.87s !important; animation-delay: 2.87s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(57) { -webkit-animation-delay: 2.89s !important; animation-delay: 2.89s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(58) { -webkit-animation-delay: 2.91s !important; animation-delay: 2.91s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(59) { -webkit-animation-delay: 2.93s !important; animation-delay: 2.93s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(60) { -webkit-animation-delay: 2.95s !important; animation-delay: 2.95s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(61) { -webkit-animation-delay: 2.97s !important; animation-delay: 2.97s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(62) { -webkit-animation-delay: 2.99s !important; animation-delay: 2.99s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(63) { -webkit-animation-delay: 3.01s !important; animation-delay: 3.01s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(64) { -webkit-animation-delay: 3.03s !important; animation-delay: 3.03s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(65) { -webkit-animation-delay: 3.05s !important; animation-delay: 3.05s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(66) { -webkit-animation-delay: 3.07s !important; animation-delay: 3.07s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(67) { -webkit-animation-delay: 3.09s !important; animation-delay: 3.09s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(68) { -webkit-animation-delay: 3.11s !important; animation-delay: 3.11s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(69) { -webkit-animation-delay: 3.13s !important; animation-delay: 3.13s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(70) { -webkit-animation-delay: 3.15s !important; animation-delay: 3.15s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(71) { -webkit-animation-delay: 3.17s !important; animation-delay: 3.17s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(72) { -webkit-animation-delay: 3.19s !important; animation-delay: 3.19s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(73) { -webkit-animation-delay: 3.21s !important; animation-delay: 3.21s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(74) { -webkit-animation-delay: 3.23s !important; animation-delay: 3.23s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(75) { -webkit-animation-delay: 3.25s !important; animation-delay: 3.25s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(76) { -webkit-animation-delay: 3.27s !important; animation-delay: 3.27s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(77) { -webkit-animation-delay: 3.29s !important; animation-delay: 3.29s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(78) { -webkit-animation-delay: 3.31s !important; animation-delay: 3.31s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(79) { -webkit-animation-delay: 3.33s !important; animation-delay: 3.33s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(80) { -webkit-animation-delay: 3.35s !important; animation-delay: 3.35s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(81) { -webkit-animation-delay: 3.37s !important; animation-delay: 3.37s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(82) { -webkit-animation-delay: 3.39s !important; animation-delay: 3.39s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(83) { -webkit-animation-delay: 3.41s !important; animation-delay: 3.41s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(84) { -webkit-animation-delay: 3.43s !important; animation-delay: 3.43s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(85) { -webkit-animation-delay: 3.45s !important; animation-delay: 3.45s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(86) { -webkit-animation-delay: 3.47s !important; animation-delay: 3.47s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(87) { -webkit-animation-delay: 3.49s !important; animation-delay: 3.49s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(88) { -webkit-animation-delay: 3.51s !important; animation-delay: 3.51s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(89) { -webkit-animation-delay: 3.53s !important; animation-delay: 3.53s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(90) { -webkit-animation-delay: 3.55s !important; animation-delay: 3.55s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(91) { -webkit-animation-delay: 3.57s !important; animation-delay: 3.57s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(92) { -webkit-animation-delay: 3.59s !important; animation-delay: 3.59s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(93) { -webkit-animation-delay: 3.61s !important; animation-delay: 3.61s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(94) { -webkit-animation-delay: 3.63s !important; animation-delay: 3.63s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(95) { -webkit-animation-delay: 3.65s !important; animation-delay: 3.65s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(96) { -webkit-animation-delay: 3.67s !important; animation-delay: 3.67s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(97) { -webkit-animation-delay: 3.69s !important; animation-delay: 3.69s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(98) { -webkit-animation-delay: 3.71s !important; animation-delay: 3.71s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(99) { -webkit-animation-delay: 3.73s !important; animation-delay: 3.73s !important; } body #wrap:not(.loading) .number.spacer:nth-of-type(n + 4) .cell:nth-of-type(100) { -webkit-animation-delay: 3.75s !important; animation-delay: 3.75s !important; } body #wrap:not(.loading) .number.spacer .cell { -webkit-animation: clip-out 0.2s ease-in-out 1 forwards; animation: clip-out 0.2s ease-in-out 1 forwards; } @-webkit-keyframes clip-out { from { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } } @keyframes clip-out { from { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } to { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } } body .number { display: grid; width: 300px; height: 300px; grid-template-columns: repeat(10, 30px); grid-template-rows: repeat(10, 30px); } body .number .cell { will-change: clip-path; } body .number.spacer { height: 150px; grid-template-columns: repeat(10, 30px); grid-template-rows: repeat(5, 30px); } body .number.number0 .cell:nth-of-type(1) { grid-area: 2 / 8 / 3 / 9; } body .number.number0 .cell:nth-of-type(2) { grid-area: 1 / 7 / 2 / 8; } body .number.number0 .cell:nth-of-type(3) { grid-area: 1 / 6 / 2 / 7; } body .number.number0 .cell:nth-of-type(4) { grid-area: 1 / 4 / 2 / 5; } body .number.number0 .cell:nth-of-type(5) { grid-area: 1 / 5 / 2 / 6; } body .number.number0 .cell:nth-of-type(6) { grid-area: 2 / 7 / 3 / 8; } body .number.number0 .cell:nth-of-type(7) { grid-area: 2 / 6 / 3 / 7; } body .number.number0 .cell:nth-of-type(8) { grid-area: 2 / 5 / 3 / 6; } body .number.number0 .cell:nth-of-type(9) { grid-area: 2 / 4 / 3 / 5; } body .number.number0 .cell:nth-of-type(10) { grid-area: 2 / 3 / 3 / 4; } body .number.number0 .cell:nth-of-type(11) { grid-area: 3 / 2 / 4 / 3; } body .number.number0 .cell:nth-of-type(12) { grid-area: 4 / 2 / 5 / 3; } body .number.number0 .cell:nth-of-type(13) { grid-area: 5 / 2 / 6 / 3; } body .number.number0 .cell:nth-of-type(14) { grid-area: 6 / 2 / 7 / 3; } body .number.number0 .cell:nth-of-type(15) { grid-area: 7 / 2 / 8 / 3; } body .number.number0 .cell:nth-of-type(16) { grid-area: 8 / 2 / 9 / 3; } body .number.number0 .cell:nth-of-type(17) { grid-area: 3 / 3 / 4 / 4; } body .number.number0 .cell:nth-of-type(18) { grid-area: 4 / 3 / 5 / 4; } body .number.number0 .cell:nth-of-type(19) { grid-area: 5 / 3 / 6 / 4; } body .number.number0 .cell:nth-of-type(20) { grid-area: 7 / 3 / 8 / 4; } body .number.number0 .cell:nth-of-type(21) { grid-area: 6 / 3 / 7 / 4; } body .number.number0 .cell:nth-of-type(22) { grid-area: 8 / 3 / 9 / 4; } body .number.number0 .cell:nth-of-type(23) { grid-area: 9 / 3 / 10 / 4; } body .number.number0 .cell:nth-of-type(24) { grid-area: 10 / 4 / 11 / 5; } body .number.number0 .cell:nth-of-type(25) { grid-area: 10 / 5 / 11 / 6; } body .number.number0 .cell:nth-of-type(26) { grid-area: 10 / 6 / 11 / 7; } body .number.number0 .cell:nth-of-type(27) { grid-area: 10 / 7 / 11 / 8; } body .number.number0 .cell:nth-of-type(28) { grid-area: 9 / 8 / 10 / 9; } body .number.number0 .cell:nth-of-type(29) { grid-area: 3 / 9 / 4 / 10; } body .number.number0 .cell:nth-of-type(30) { grid-area: 3 / 8 / 4 / 9; } body .number.number0 .cell:nth-of-type(31) { grid-area: 5 / 8 / 6 / 9; } body .number.number0 .cell:nth-of-type(32) { grid-area: 4 / 8 / 5 / 9; } body .number.number0 .cell:nth-of-type(33) { grid-area: 6 / 8 / 7 / 9; } body .number.number0 .cell:nth-of-type(34) { grid-area: 7 / 8 / 8 / 9; } body .number.number0 .cell:nth-of-type(35) { grid-area: 8 / 8 / 9 / 9; } body .number.number0 .cell:nth-of-type(36) { grid-area: 8 / 9 / 9 / 10; } body .number.number0 .cell:nth-of-type(37) { grid-area: 7 / 9 / 8 / 10; } body .number.number0 .cell:nth-of-type(38) { grid-area: 6 / 9 / 7 / 10; } body .number.number0 .cell:nth-of-type(39) { grid-area: 5 / 9 / 6 / 10; } body .number.number0 .cell:nth-of-type(40) { grid-area: 4 / 9 / 5 / 10; } body .number.number0 .cell:nth-of-type(41) { grid-area: 9 / 4 / 10 / 5; } body .number.number0 .cell:nth-of-type(42) { grid-area: 9 / 5 / 10 / 6; } body .number.number0 .cell:nth-of-type(43) { grid-area: 9 / 6 / 10 / 7; } body .number.number0 .cell:nth-of-type(44) { grid-area: 9 / 7 / 10 / 8; } body .number.number1 .cell:nth-of-type(1) { grid-area: 3 / 3 / 4 / 4; } body .number.number1 .cell:nth-of-type(2) { grid-area: 3 / 4 / 4 / 5; } body .number.number1 .cell:nth-of-type(3) { grid-area: 2 / 4 / 3 / 5; } body .number.number1 .cell:nth-of-type(4) { grid-area: 2 / 5 / 3 / 6; } body .number.number1 .cell:nth-of-type(5) { grid-area: 1 / 5 / 2 / 6; } body .number.number1 .cell:nth-of-type(6) { grid-area: 1 / 6 / 2 / 7; } body .number.number1 .cell:nth-of-type(7) { grid-area: 2 / 6 / 3 / 7; } body .number.number1 .cell:nth-of-type(8) { grid-area: 3 / 6 / 4 / 7; } body .number.number1 .cell:nth-of-type(9) { grid-area: 3 / 5 / 4 / 6; } body .number.number1 .cell:nth-of-type(10) { grid-area: 4 / 5 / 5 / 6; } body .number.number1 .cell:nth-of-type(11) { grid-area: 4 / 6 / 5 / 7; } body .number.number1 .cell:nth-of-type(12) { grid-area: 5 / 6 / 6 / 7; } body .number.number1 .cell:nth-of-type(13) { grid-area: 5 / 5 / 6 / 6; } body .number.number1 .cell:nth-of-type(14) { grid-area: 6 / 5 / 7 / 6; } body .number.number1 .cell:nth-of-type(15) { grid-area: 6 / 6 / 7 / 7; } body .number.number1 .cell:nth-of-type(16) { grid-area: 7 / 6 / 8 / 7; } body .number.number1 .cell:nth-of-type(17) { grid-area: 7 / 5 / 8 / 6; } body .number.number1 .cell:nth-of-type(18) { grid-area: 8 / 5 / 9 / 6; } body .number.number1 .cell:nth-of-type(19) { grid-area: 8 / 6 / 9 / 7; } body .number.number1 .cell:nth-of-type(20) { grid-area: 9 / 6 / 10 / 7; } body .number.number1 .cell:nth-of-type(21) { grid-area: 9 / 5 / 10 / 6; } body .number.number1 .cell:nth-of-type(22) { grid-area: 10 / 5 / 11 / 6; } body .number.number1 .cell:nth-of-type(23) { grid-area: 10 / 6 / 11 / 7; } body .number.number1 .cell:nth-of-type(24) { grid-area: 10 / 7 / 11 / 8; } body .number.number1 .cell:nth-of-type(25) { grid-area: 10 / 8 / 11 / 9; } body .number.number1 .cell:nth-of-type(26) { grid-area: 10 / 4 / 11 / 5; } body .number.number1 .cell:nth-of-type(27) { grid-area: 10 / 3 / 11 / 4; } body .number.number1 .cell:nth-of-type(28) { grid-area: 9 / 3 / 10 / 4; } body .number.number1 .cell:nth-of-type(29) { grid-area: 9 / 4 / 10 / 5; } body .number.number1 .cell:nth-of-type(30) { grid-area: 9 / 7 / 10 / 8; } body .number.number1 .cell:nth-of-type(31) { grid-area: 9 / 8 / 10 / 9; } body .number.number2 .cell:nth-of-type(1) { grid-area: 4 / 2 / 5 / 3; } body .number.number2 .cell:nth-of-type(2) { grid-area: 4 / 3 / 5 / 4; } body .number.number2 .cell:nth-of-type(3) { grid-area: 3 / 2 / 4 / 3; } body .number.number2 .cell:nth-of-type(4) { grid-area: 3 / 3 / 4 / 4; } body .number.number2 .cell:nth-of-type(5) { grid-area: 2 / 3 / 3 / 4; } body .number.number2 .cell:nth-of-type(6) { grid-area: 2 / 4 / 3 / 5; } body .number.number2 .cell:nth-of-type(7) { grid-area: 1 / 4 / 2 / 5; } body .number.number2 .cell:nth-of-type(8) { grid-area: 1 / 5 / 2 / 6; } body .number.number2 .cell:nth-of-type(9) { grid-area: 1 / 6 / 2 / 7; } body .number.number2 .cell:nth-of-type(10) { grid-area: 1 / 7 / 2 / 8; } body .number.number2 .cell:nth-of-type(11) { grid-area: 2 / 5 / 3 / 6; } body .number.number2 .cell:nth-of-type(12) { grid-area: 2 / 6 / 3 / 7; } body .number.number2 .cell:nth-of-type(13) { grid-area: 2 / 7 / 3 / 8; } body .number.number2 .cell:nth-of-type(14) { grid-area: 3 / 8 / 4 / 9; } body .number.number2 .cell:nth-of-type(15) { grid-area: 3 / 7 / 4 / 8; } body .number.number2 .cell:nth-of-type(16) { grid-area: 4 / 8 / 5 / 9; } body .number.number2 .cell:nth-of-type(17) { grid-area: 4 / 7 / 5 / 8; } body .number.number2 .cell:nth-of-type(18) { grid-area: 5 / 8 / 6 / 9; } body .number.number2 .cell:nth-of-type(19) { grid-area: 5 / 7 / 6 / 8; } body .number.number2 .cell:nth-of-type(20) { grid-area: 6 / 7 / 7 / 8; } body .number.number2 .cell:nth-of-type(21) { grid-area: 6 / 6 / 7 / 7; } body .number.number2 .cell:nth-of-type(22) { grid-area: 9 / 7 / 10 / 8; } body .number.number2 .cell:nth-of-type(23) { grid-area: 7 / 6 / 8 / 7; } body .number.number2 .cell:nth-of-type(24) { grid-area: 7 / 5 / 8 / 6; } body .number.number2 .cell:nth-of-type(25) { grid-area: 9 / 6 / 10 / 7; } body .number.number2 .cell:nth-of-type(26) { grid-area: 8 / 5 / 9 / 6; } body .number.number2 .cell:nth-of-type(27) { grid-area: 8 / 4 / 9 / 5; } body .number.number2 .cell:nth-of-type(28) { grid-area: 9 / 5 / 10 / 6; } body .number.number2 .cell:nth-of-type(29) { grid-area: 9 / 4 / 10 / 5; } body .number.number2 .cell:nth-of-type(30) { grid-area: 9 / 3 / 10 / 4; } body .number.number2 .cell:nth-of-type(31) { grid-area: 10 / 3 / 11 / 4; } body .number.number2 .cell:nth-of-type(32) { grid-area: 10 / 4 / 11 / 5; } body .number.number2 .cell:nth-of-type(33) { grid-area: 10 / 5 / 11 / 6; } body .number.number2 .cell:nth-of-type(34) { grid-area: 10 / 6 / 11 / 7; } body .number.number2 .cell:nth-of-type(35) { grid-area: 10 / 7 / 11 / 8; } body .number.number2 .cell:nth-of-type(36) { grid-area: 10 / 8 / 11 / 9; } body .number.number2 .cell:nth-of-type(37) { grid-area: 10 / 2 / 11 / 3; } body .number.number2 .cell:nth-of-type(38) { grid-area: 2 / 8 / 3 / 9; } body .number.number2 .cell:nth-of-type(39) { grid-area: 9 / 8 / 10 / 9; } body .number.number3 .cell:nth-of-type(1) { grid-area: 4 / 2 / 5 / 3; } body .number.number3 .cell:nth-of-type(2) { grid-area: 4 / 3 / 5 / 4; } body .number.number3 .cell:nth-of-type(3) { grid-area: 3 / 2 / 4 / 3; } body .number.number3 .cell:nth-of-type(4) { grid-area: 3 / 3 / 4 / 4; } body .number.number3 .cell:nth-of-type(5) { grid-area: 2 / 3 / 3 / 4; } body .number.number3 .cell:nth-of-type(6) { grid-area: 2 / 4 / 3 / 5; } body .number.number3 .cell:nth-of-type(7) { grid-area: 1 / 4 / 2 / 5; } body .number.number3 .cell:nth-of-type(8) { grid-area: 1 / 5 / 2 / 6; } body .number.number3 .cell:nth-of-type(9) { grid-area: 1 / 6 / 2 / 7; } body .number.number3 .cell:nth-of-type(10) { grid-area: 1 / 7 / 2 / 8; } body .number.number3 .cell:nth-of-type(11) { grid-area: 2 / 5 / 3 / 6; } body .number.number3 .cell:nth-of-type(12) { grid-area: 2 / 6 / 3 / 7; } body .number.number3 .cell:nth-of-type(13) { grid-area: 2 / 7 / 3 / 8; } body .number.number3 .cell:nth-of-type(14) { grid-area: 3 / 8 / 4 / 9; } body .number.number3 .cell:nth-of-type(15) { grid-area: 3 / 7 / 4 / 8; } body .number.number3 .cell:nth-of-type(16) { grid-area: 4 / 8 / 5 / 9; } body .number.number3 .cell:nth-of-type(17) { grid-area: 4 / 7 / 5 / 8; } body .number.number3 .cell:nth-of-type(18) { grid-area: 5 / 8 / 6 / 9; } body .number.number3 .cell:nth-of-type(19) { grid-area: 5 / 7 / 6 / 8; } body .number.number3 .cell:nth-of-type(20) { grid-area: 6 / 7 / 7 / 8; } body .number.number3 .cell:nth-of-type(21) { grid-area: 2 / 8 / 3 / 9; } body .number.number3 .cell:nth-of-type(22) { grid-area: 7 / 7 / 8 / 8; } body .number.number3 .cell:nth-of-type(23) { grid-area: 8 / 7 / 9 / 8; } body .number.number3 .cell:nth-of-type(24) { grid-area: 8 / 8 / 9 / 9; } body .number.number3 .cell:nth-of-type(25) { grid-area: 9 / 8 / 10 / 9; } body .number.number3 .cell:nth-of-type(26) { grid-area: 9 / 7 / 10 / 8; } body .number.number3 .cell:nth-of-type(27) { grid-area: 10 / 7 / 11 / 8; } body .number.number3 .cell:nth-of-type(28) { grid-area: 10 / 6 / 11 / 7; } body .number.number3 .cell:nth-of-type(29) { grid-area: 5 / 6 / 6 / 7; } body .number.number3 .cell:nth-of-type(30) { grid-area: 5 / 5 / 6 / 6; } body .number.number3 .cell:nth-of-type(31) { grid-area: 6 / 5 / 7 / 6; } body .number.number3 .cell:nth-of-type(32) { grid-area: 6 / 6 / 7 / 7; } body .number.number3 .cell:nth-of-type(33) { grid-area: 7 / 8 / 8 / 9; } body .number.number3 .cell:nth-of-type(34) { grid-area: 9 / 6 / 10 / 7; } body .number.number3 .cell:nth-of-type(35) { grid-area: 9 / 5 / 10 / 6; } body .number.number3 .cell:nth-of-type(36) { grid-area: 10 / 5 / 11 / 6; } body .number.number3 .cell:nth-of-type(37) { grid-area: 10 / 4 / 11 / 5; } body .number.number3 .cell:nth-of-type(38) { grid-area: 9 / 4 / 10 / 5; } body .number.number3 .cell:nth-of-type(39) { grid-area: 9 / 3 / 10 / 4; } body .number.number3 .cell:nth-of-type(40) { grid-area: 8 / 3 / 9 / 4; } body .number.number3 .cell:nth-of-type(41) { grid-area: 8 / 2 / 9 / 3; } body .number.number3 .cell:nth-of-type(42) { grid-area: 9 / 2 / 10 / 3; } body .number.number4 .cell:nth-of-type(1) { grid-area: 2 / 4 / 3 / 5; opacity: 0; } body .number.number4 .cell:nth-of-type(2) { grid-area: 1 / 6 / 2 / 7; } body .number.number4 .cell:nth-of-type(3) { grid-area: 1 / 7 / 2 / 8; } body .number.number4 .cell:nth-of-type(4) { grid-area: 2 / 5 / 3 / 6; } body .number.number4 .cell:nth-of-type(5) { grid-area: 2 / 6 / 3 / 7; } body .number.number4 .cell:nth-of-type(6) { grid-area: 2 / 7 / 3 / 8; } body .number.number4 .cell:nth-of-type(7) { grid-area: 3 / 7 / 4 / 8; } body .number.number4 .cell:nth-of-type(8) { grid-area: 4 / 7 / 5 / 8; } body .number.number4 .cell:nth-of-type(9) { grid-area: 5 / 7 / 6 / 8; } body .number.number4 .cell:nth-of-type(10) { grid-area: 3 / 3 / 4 / 4; opacity: 0; } body .number.number4 .cell:nth-of-type(11) { grid-area: 3 / 4 / 4 / 5; } body .number.number4 .cell:nth-of-type(12) { grid-area: 4 / 3 / 5 / 4; } body .number.number4 .cell:nth-of-type(13) { grid-area: 5 / 2 / 6 / 3; } body .number.number4 .cell:nth-of-type(14) { grid-area: 5 / 3 / 6 / 4; } body .number.number4 .cell:nth-of-type(15) { grid-area: 6 / 2 / 7 / 3; } body .number.number4 .cell:nth-of-type(16) { grid-area: 6 / 3 / 7 / 4; } body .number.number4 .cell:nth-of-type(17) { grid-area: 6 / 4 / 7 / 5; } body .number.number4 .cell:nth-of-type(18) { grid-area: 6 / 5 / 7 / 6; } body .number.number4 .cell:nth-of-type(19) { grid-area: 6 / 6 / 7 / 7; } body .number.number4 .cell:nth-of-type(20) { grid-area: 6 / 7 / 7 / 8; } body .number.number4 .cell:nth-of-type(21) { grid-area: 6 / 8 / 7 / 9; } body .number.number4 .cell:nth-of-type(22) { grid-area: 6 / 9 / 7 / 10; } body .number.number4 .cell:nth-of-type(23) { grid-area: 7 / 9 / 8 / 10; } body .number.number4 .cell:nth-of-type(24) { grid-area: 7 / 8 / 8 / 9; } body .number.number4 .cell:nth-of-type(25) { grid-area: 7 / 7 / 8 / 8; } body .number.number4 .cell:nth-of-type(26) { grid-area: 1 / 8 / 2 / 9; } body .number.number4 .cell:nth-of-type(27) { grid-area: 2 / 8 / 3 / 9; } body .number.number4 .cell:nth-of-type(28) { grid-area: 3 / 8 / 4 / 9; } body .number.number4 .cell:nth-of-type(29) { grid-area: 4 / 8 / 5 / 9; } body .number.number4 .cell:nth-of-type(30) { grid-area: 5 / 8 / 6 / 9; } body .number.number4 .cell:nth-of-type(31) { grid-area: 8 / 7 / 9 / 8; } body .number.number4 .cell:nth-of-type(32) { grid-area: 8 / 8 / 9 / 9; } body .number.number4 .cell:nth-of-type(33) { grid-area: 9 / 8 / 10 / 9; } body .number.number4 .cell:nth-of-type(34) { grid-area: 9 / 7 / 10 / 8; } body .number.number4 .cell:nth-of-type(35) { grid-area: 10 / 7 / 11 / 8; } body .number.number4 .cell:nth-of-type(36) { grid-area: 10 / 8 / 11 / 9; } body .number.number4 .cell:nth-of-type(37) { grid-area: 7 / 6 / 8 / 7; } body .number.number4 .cell:nth-of-type(38) { grid-area: 7 / 5 / 8 / 6; } body .number.number4 .cell:nth-of-type(39) { grid-area: 7 / 4 / 8 / 5; } body .number.number4 .cell:nth-of-type(40) { grid-area: 7 / 3 / 8 / 4; } body .number.number4 .cell:nth-of-type(41) { grid-area: 7 / 2 / 8 / 3; } body .number.number5 .cell:nth-of-type(1) { grid-area: 1 / 6 / 2 / 7; } body .number.number5 .cell:nth-of-type(2) { grid-area: 1 / 7 / 2 / 8; } body .number.number5 .cell:nth-of-type(3) { grid-area: 2 / 5 / 3 / 6; } body .number.number5 .cell:nth-of-type(4) { grid-area: 2 / 6 / 3 / 7; } body .number.number5 .cell:nth-of-type(5) { grid-area: 2 / 7 / 3 / 8; } body .number.number5 .cell:nth-of-type(6) { grid-area: 5 / 3 / 6 / 4; } body .number.number5 .cell:nth-of-type(7) { grid-area: 1 / 8 / 2 / 9; } body .number.number5 .cell:nth-of-type(8) { grid-area: 2 / 8 / 3 / 9; } body .number.number5 .cell:nth-of-type(9) { grid-area: 4 / 3 / 5 / 4; } body .number.number5 .cell:nth-of-type(10) { grid-area: 3 / 3 / 4 / 4; } body .number.number5 .cell:nth-of-type(11) { grid-area: 2 / 3 / 3 / 4; } body .number.number5 .cell:nth-of-type(12) { grid-area: 1 / 3 / 2 / 4; } body .number.number5 .cell:nth-of-type(13) { grid-area: 1 / 4 / 2 / 5; } body .number.number5 .cell:nth-of-type(14) { grid-area: 1 / 5 / 2 / 6; } body .number.number5 .cell:nth-of-type(15) { grid-area: 2 / 4 / 3 / 5; } body .number.number5 .cell:nth-of-type(16) { grid-area: 5 / 4 / 6 / 5; } body .number.number5 .cell:nth-of-type(17) { grid-area: 5 / 5 / 6 / 6; } body .number.number5 .cell:nth-of-type(18) { grid-area: 5 / 6 / 6 / 7; } body .number.number5 .cell:nth-of-type(19) { grid-area: 5 / 7 / 6 / 8; } body .number.number5 .cell:nth-of-type(20) { grid-area: 5 / 8 / 6 / 9; } body .number.number5 .cell:nth-of-type(21) { grid-area: 7 / 9 / 8 / 10; } body .number.number5 .cell:nth-of-type(22) { grid-area: 8 / 9 / 9 / 10; } body .number.number5 .cell:nth-of-type(23) { grid-area: 6 / 9 / 7 / 10; } body .number.number5 .cell:nth-of-type(24) { grid-area: 10 / 8 / 11 / 9; } body .number.number5 .cell:nth-of-type(25) { grid-area: 10 / 7 / 11 / 8; } body .number.number5 .cell:nth-of-type(26) { grid-area: 10 / 6 / 11 / 7; } body .number.number5 .cell:nth-of-type(27) { grid-area: 9 / 5 / 10 / 6; } body .number.number5 .cell:nth-of-type(28) { grid-area: 10 / 5 / 11 / 6; } body .number.number5 .cell:nth-of-type(29) { grid-area: 10 / 4 / 11 / 5; } body .number.number5 .cell:nth-of-type(30) { grid-area: 9 / 4 / 10 / 5; } body .number.number5 .cell:nth-of-type(31) { grid-area: 9 / 3 / 10 / 4; } body .number.number5 .cell:nth-of-type(32) { grid-area: 10 / 3 / 11 / 4; } body .number.number5 .cell:nth-of-type(33) { grid-area: 3 / 4 / 4 / 5; } body .number.number5 .cell:nth-of-type(34) { grid-area: 4 / 4 / 5 / 5; } body .number.number5 .cell:nth-of-type(35) { grid-area: 9 / 9 / 10 / 10; } body .number.number5 .cell:nth-of-type(36) { grid-area: 9 / 6 / 10 / 7; } body .number.number5 .cell:nth-of-type(37) { grid-area: 9 / 7 / 10 / 8; } body .number.number5 .cell:nth-of-type(38) { grid-area: 9 / 8 / 10 / 9; } body .number.number5 .cell:nth-of-type(39) { grid-area: 2 / 9 / 3 / 10; } body .number.number5 .cell:nth-of-type(40) { grid-area: 1 / 9 / 2 / 10; } body .number.number9 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body .number.number6 .cell:nth-of-type(1), body .number.number9 .cell:nth-of-type(1) { grid-area: 3 / 8 / 4 / 9; } body .number.number6 .cell:nth-of-type(2), body .number.number9 .cell:nth-of-type(2) { grid-area: 2 / 8 / 3 / 9; } body .number.number6 .cell:nth-of-type(3), body .number.number9 .cell:nth-of-type(3) { grid-area: 1 / 7 / 2 / 8; } body .number.number6 .cell:nth-of-type(4), body .number.number9 .cell:nth-of-type(4) { grid-area: 1 / 6 / 2 / 7; } body .number.number6 .cell:nth-of-type(5), body .number.number9 .cell:nth-of-type(5) { grid-area: 1 / 4 / 2 / 5; } body .number.number6 .cell:nth-of-type(6), body .number.number9 .cell:nth-of-type(6) { grid-area: 1 / 5 / 2 / 6; } body .number.number6 .cell:nth-of-type(7), body .number.number9 .cell:nth-of-type(7) { grid-area: 2 / 7 / 3 / 8; } body .number.number6 .cell:nth-of-type(8), body .number.number9 .cell:nth-of-type(8) { grid-area: 2 / 6 / 3 / 7; } body .number.number6 .cell:nth-of-type(9), body .number.number9 .cell:nth-of-type(9) { grid-area: 2 / 5 / 3 / 6; } body .number.number6 .cell:nth-of-type(10), body .number.number9 .cell:nth-of-type(10) { grid-area: 2 / 4 / 3 / 5; } body .number.number6 .cell:nth-of-type(11), body .number.number9 .cell:nth-of-type(11) { grid-area: 2 / 3 / 3 / 4; } body .number.number6 .cell:nth-of-type(12), body .number.number9 .cell:nth-of-type(12) { grid-area: 1 / 3 / 2 / 4; } body .number.number6 .cell:nth-of-type(13), body .number.number9 .cell:nth-of-type(13) { grid-area: 2 / 2 / 3 / 3; } body .number.number6 .cell:nth-of-type(14), body .number.nu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0