js实现鼠标悬浮经过一排数字放大卢蒙宏数据精化效果代码
代码语言:html
所属分类:悬停
代码描述:js实现鼠标悬浮经过一排数字放大卢蒙宏数据精化效果代码
代码标签: js 鼠标 悬浮 经过 数字 放大 卢蒙宏 数据 精化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap"); html { cursor: none; } body { display: grid; place-items: center; height: 100vh; font-family: "Plus Jakarta Sans"; --bg: #00203a; --g: #24e4f2; background: var(--bg); overflow: hidden; --distance: 1; transition: 2s ease-in-out 3s; filter: brightness(0) blur(2px); color: var(--g); cursor: none; } body #cursor { opacity: 0; width: 30px; height: 30px; position: absolute; background: var(--g); -webkit-clip-path: polygon(1% 0%, 35% 100%, 53% 58%, 100% 48%); clip-path: polygon(1% 0%, 35% 100%, 53% 58%, 100% 48%); transition: opacity 0.2s ease-in-out; z-index: 10; } body #cursor:before { content: ""; position: absolute; width: 100%; height: 100%; background: var(--bg); -webkit-clip-path: inherit; clip-path: inherit; transform: scale(0.5); transform-origin: 37.5% 40%; } body.loaded { transition: 2s ease-in-out 0s; filter: brightness(1); } body.loaded:hover #cursor { opacity: 1; } body.loaded #header .inner { transition: 0.75s ease-in-out 3s; transform: translate(0, calc(-50% - 0vmin)) scaleX(1); } body.loaded #header .inner:before { transform: translateY(-0.15vmin); opacity: 0.75; transition: 1s ease-in-out 3.75s; } body.loaded #lower:after { opacity: 1; transition: 0.75s ease-in-out 3s; } body.loaded #lower .box { transform: translateY(0); } body.loaded #lower .box:nth-of-type(1):before { transform: translate(-50%, -50%); } body.loaded #lower .box:nth-of-type(2):before { transform: translate(-50%, -50%); } body.loaded #lower .box:nth-of-type(3):before { transform: translate(-50%, -50%); } body.loaded #lower .box:nth-of-type(4):before { transform: translate(-50%, -50%); } body.loaded #lower .box:nth-of-type(5):before { transform: translate(-50%, -50%); } body.loaded #lower .box:nth-of-type(5):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded #lower .box:nth-of-type(6):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded #lower .box:nth-of-type(7):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded #lower .box:nth-of-type(8):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded #lower .box:nth-of-type(9):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded #lower .box:nth-of-type(10):nth-of-type(n + 6) { background-position: 50% 50%; } body.loaded img { opacity: 1; filter: blur(0px); } body.loaded #wrap:before { height: calc(100% + 5vmin); opacity: 1; } body.loaded #wrap .num { opacity: 1; } body:before, body:after { content: ""; position: absolute; width: 112.5%; height: 112.5%; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(0px); z-index: 9; background: linear-gradient(rgba(0, 32, 58, 0.4) 50%, rgba(0, 0, 0, 0.05) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06)); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; border-radius: 10vmin; -webkit-animation: flicker 3s ease-in-out infinite alternate; animation: flicker 3s ease-in-out infinite alternate; } @-webkit-keyframes flicker { 22% { opacity: 1; } 25% { opacity: 0.75; } 37% { opacity: 1; } } @keyframes flicker { 22% { opacity: 1; } 25% { opacity: 0.75; } 37% { opacity: 1; } } body:after { -webkit-animation: none; animation: none; box-shadow: inset 0 0 50vmin 5vmin #000, 0 0 0 50vmin #000; opacity: 0.5; width: 100%; height: 100%; } body #header { position: absolute; width: 100vmin; top: calc(50% - 50.75vmin); display: flex; justify-content: flex-end; } body #header .inner { overflow: hidden; height: 5.5vmin; top: calc(50% - 0.15vmin); transform: translate(0, calc(-50% - 0vmin)) scaleX(0); opacity: 0.75; transform-origin: right; transition: 0.75s ease-in-out 0s; z-index: 6; position: absolute; width: calc(100% - 17.25vmin); border: 0.15vmin solid var(--g); left: 0; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; border-color: var(--g) transparent var(--g) var(--g); } body #header .inner:before { opacity: 0; content: "40% Complete"; font-size: 2.5vmin; color: var(--bg); text-shadow: 0 0.15vmin var(--g), 0.15vmin 0 var(--g), -0.15vmin 0 var(--g), 0 -0.15vmin var(--g); font-weight: 900; padding-right: 5vmin; line-height: 1; transform: translateY(20vmin); transition: 0.6s ease-in-out; } body img { height: 12.5vmin; width: auto; margin-right: -2.5vmin; transition: 1s ease-in-out 2.25s; opacity: 0; filter: blur(20px); } body #lower { position: absolute; width: 100vmin; height: 15vmin; top: calc(50% + 33.5vmin); left: 50%; transform: translate(-50%, 0); display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 3vmin; grid-row-gap: 1vmin; padding: 2vmin 1vmin 4vmin; box-sizing: border-box; } body #lower:after { content: "0x881 : 0x1142"; position: absolute; width: 100vw; left: 50%; transform: translateX(-50%); text-align: center; bottom: -1vmin; font-size: 2vmin; border-top: 0.25vmin solid var(--g); padding-top: 0.5vmin; opacity: 0; transition: 0.75s ease-in-out 0s; } body #lower .box { box-shadow: inset 0 0 0 0.25vmin var(--g); position: relative; transition: transform 1s ease-in-out, background-position 3s ease-in-out; transform: translateY(50vh); overflow: hidden; } body #lower .box:nth-of-type(1) { transition-delay: 2.05s, 3.05s; } body #lower .box:nth-of-type(1):before { content: "01"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.55s; } body #lower .box:nth-of-type(1):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 43%, transparent 43%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(1):nth-of-type(n + 6):before { content: "43%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(2) { transition-delay: 2.1s, 3.1s; } body #lower .box:nth-of-type(2):before { content: "02"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.6s; } body #lower .box:nth-of-type(2):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 47%, transparent 47%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(2):nth-of-type(n + 6):before { content: "47%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(3) { transition-delay: 2.15s, 3.15s; } body #lower .box:nth-of-type(3):before { content: "03"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.65s; } body #lower .box:nth-of-type(3):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 53%, transparent 53%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(3):nth-of-type(n + 6):before { content: "53%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(4) { transition-delay: 2.2s, 3.2s; } body #lower .box:nth-of-type(4):before { content: "04"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.7s; } body #lower .box:nth-of-type(4):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 66%, transparent 66%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(4):nth-of-type(n + 6):before { content: "66%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(5) { transition-delay: 2.25s, 3.25s; } body #lower .box:nth-of-type(5):before { content: "05"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.75s; } body #lower .box:nth-of-type(5):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 59%, transparent 59%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(5):nth-of-type(n + 6):before { content: "59%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(6) { transition-delay: 2.3s, 3.3s; } body #lower .box:nth-of-type(6):before { content: "06"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.8s; } body #lower .box:nth-of-type(6):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 52%, transparent 52%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(6):nth-of-type(n + 6):before { content: "52%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(7) { transition-delay: 2.35s, 3.35s; } body #lower .box:nth-of-type(7):before { content: "07"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.85s; } body #lower .box:nth-of-type(7):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 37%, transparent 37%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(7):nth-of-type(n + 6):before { content: "37%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(8) { transition-delay: 2.4s, 3.4s; } body #lower .box:nth-of-type(8):before { content: "08"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.9s; } body #lower .box:nth-of-type(8):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 70%, transparent 70%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(8):nth-of-type(n + 6):before { content: "70%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(9) { transition-delay: 2.45s, 3.45s; } body #lower .box:nth-of-type(9):before { content: "09"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 3.95s; } body #lower .box:nth-of-type(9):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 47%, transparent 47%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(9):nth-of-type(n + 6):before { content: "47%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #lower .box:nth-of-type(10) { transition-delay: 2.5s, 3.5s; } body #lower .box:nth-of-type(10):before { content: "010"; position: absolute; font-size: 3vmin; left: 50%; top: 50%; transform: translate(-50%, 20vmin); transition: 1s ease-in-out; transition-delay: 4s; } body #lower .box:nth-of-type(10):nth-of-type(n + 6) { background: linear-gradient(to right, var(--g) 32%, transparent 32%); background-size: 100% 100%; background-position: -25vmin 50%; background-repeat: no-repeat; } body #lower .box:nth-of-type(10):nth-of-type(n + 6):before { content: "32%"; transform: translate(0%, -50%); left: 5%; font-size: 2.5vmin; color: var(--bg); } body #wrap { width: 100vmin; height: 65vmin; display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(8, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; position: relative; transform: translateY(-2.5vmin); } body #wrap:before { content: ""; position: absolute; width: 100vw; height: 1vmin; top: 50%; left: 50%; opacity: 0.85; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0.25vmin 0 var(--g), 0 1vmin 0 var(--bg), 0 1.125vmin 0 var(--g), 0 -0.25vmin 0 var(--g), 0 -1vmin 0 var(--bg), 0 -1.125vmin 0 var(--g); z-index: 1; opacity: 0; transition: opacity 0.25s ease-in-out 1s, height 1s ease-in-out 1.25s; } body #wrap .num { position: relative; opacity: 0; transition: opacity 0.5s ease-in-out 3s; -webkit-animation: float 2s ease-in-out infinite alternate; animation: float 2s ease-in-out infinite alternate; --x: -0.25vmin; --y: 0vmin; transform: translate(calc(var(--x) * 1), calc(var(--y) * 1)) translateZ(0px); } @-webkit-keyframes float { to { transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) translateZ(0px); } } @keyframes float { to { transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) translateZ(0px); } } body #wrap .num:nth-of-type(1) { -webkit-animation-delay: -0.05s; animation-delay: -0.05s; --x: 0.5vmin; } body #wrap .num:nth-of-type(1):nth-of-type(even) { --x: 0vmin; --y: 0.15vmin; } body #wrap .num:nth-of-type(1) .inner:before { content: "3"; } body #wrap .num:nth-of-type(2) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; --x: 0.15vmin; } body #wrap .num:nth-of-type(2):nth-of-type(even) { --x: 0vmin; --y: 0.4vmin; } body #wrap .num:nth-of-type(2) .inner:before { content: "8"; } body #wrap .num:nth-of-type(3) { -webkit-animation-delay: -0.15s; animation-delay: -0.15s; --x: 0.3vmin; } body #wrap .num:nth-of-type(3):nth-of-type(even) { --x: 0vmin; --y: 0.1vmin; } body #wrap .num:nth-of-type(3) .inner:before { content: "7"; } body #wrap .num:nth-of-type(4) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; --x: 0.1vmin; } body #wrap .num:nth-of-type(4):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(4) .inner:before { content: "6"; } body #wrap .num:nth-of-type(5) { -webkit-animation-delay: -0.25s; animation-delay: -0.25s; --x: 0.35vmin; } body #wrap .num:nth-of-type(5):nth-of-type(even) { --x: 0vmin; --y: 0.05vmin; } body #wrap .num:nth-of-type(5) .inner:before { content: "0"; } body #wrap .num:nth-of-type(6) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; --x: 0.55vmin; } body #wrap .num:nth-of-type(6):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(6) .inner:before { content: "9"; } body #wrap .num:nth-of-type(7) { -webkit-animation-delay: -0.35s; animation-delay: -0.35s; --x: 0.2vmin; } body #wrap .num:nth-of-type(7):nth-of-type(even) { --x: 0vmin; --y: 0.6vmin; } body #wrap .num:nth-of-type(7) .inner:before { content: "7"; } body #wrap .num:nth-of-type(8) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; --x: 0.7vmin; } body #wrap .num:nth-of-type(8):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(8) .inner:before { content: "3"; } body #wrap .num:nth-of-type(9) { -webkit-animation-delay: -0.45s; animation-delay: -0.45s; --x: 0.45vmin; } body #wrap .num:nth-of-type(9):nth-of-type(even) { --x: 0vmin; --y: 0vmin; } body #wrap .num:nth-of-type(9) .inner:before { content: "0"; } body #wrap .num:nth-of-type(10) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; --x: 0.2vmin; } body #wrap .num:nth-of-type(10):nth-of-type(even) { --x: 0vmin; --y: 0.55vmin; } body #wrap .num:nth-of-type(10) .inner:before { content: "4"; } body #wrap .num:nth-of-type(11) { -webkit-animation-delay: -0.55s; animation-delay: -0.55s; --x: 0.35vmin; } body #wrap .num:nth-of-type(11):nth-of-type(even) { --x: 0vmin; --y: 0.25vmin; } body #wrap .num:nth-of-type(11) .inner:before { content: "9"; } body #wrap .num:nth-of-type(12) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; --x: 0.65vmin; } body #wrap .num:nth-of-type(12):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(12) .inner:before { content: "4"; } body #wrap .num:nth-of-type(13) { -webkit-animation-delay: -0.65s; animation-delay: -0.65s; --x: 0.05vmin; } body #wrap .num:nth-of-type(13):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(13) .inner:before { content: "8"; } body #wrap .num:nth-of-type(14) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; --x: 0vmin; } body #wrap .num:nth-of-type(14):nth-of-type(even) { --x: 0vmin; --y: 0.05vmin; } body #wrap .num:nth-of-type(14) .inner:before { content: "5"; } body #wrap .num:nth-of-type(15) { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; --x: 0.05vmin; } body #wrap .num:nth-of-type(15):nth-of-type(even) { --x: 0vmin; --y: 0.1vmin; } body #wrap .num:nth-of-type(15) .inner:before { content: "7"; } body #wrap .num:nth-of-type(16) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; --x: 0.45vmin; } body #wrap .num:nth-of-type(16):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(16) .inner:before { content: "4"; } body #wrap .num:nth-of-type(17) { -webkit-animation-delay: -0.85s; animation-delay: -0.85s; --x: 0.3vmin; } body #wrap .num:nth-of-type(17):nth-of-type(even) { --x: 0vmin; --y: 0.5vmin; } body #wrap .num:nth-of-type(17) .inner:before { content: "6"; } body #wrap .num:nth-of-type(18) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; --x: 0.25vmin; } body #wrap .num:nth-of-type(18):nth-of-type(even) { --x: 0vmin; --y: 0.05vmin; } body #wrap .num:nth-of-type(18) .inner:before { content: "9"; } body #wrap .num:nth-of-type(19) { -webkit-animation-delay: -0.95s; animation-delay: -0.95s; --x: 0.05vmin; } body #wrap .num:nth-of-type(19):nth-of-type(even) { --x: 0vmin; --y: 0.7vmin; } body #wrap .num:nth-of-type(19) .inner:before { content: "4"; } body #wrap .num:nth-of-type(20) { -webkit-animation-delay: -1s; animation-delay: -1s; --x: 0.65vmin; } body #wrap .num:nth-of-type(20):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(20) .inner:before { content: "6"; } body #wrap .num:nth-of-type(21) { -webkit-animation-delay: -1.05s; animation-delay: -1.05s; --x: 0.05vmin; } body #wrap .num:nth-of-type(21):nth-of-type(even) { --x: 0vmin; --y: 0.45vmin; } body #wrap .num:nth-of-type(21) .inner:before { content: "2"; } body #wrap .num:nth-of-type(22) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; --x: 0.15vmin; } body #wrap .num:nth-of-type(22):nth-of-type(even) { --x: 0vmin; --y: 0.5vmin; } body #wrap .num:nth-of-type(22) .inner:before { content: "4"; } body #wrap .num:nth-of-type(23) { -webkit-animation-delay: -1.15s; animation-delay: -1.15s; --x: 0.45vmin; } body #wrap .num:nth-of-type(23):nth-of-type(even) { --x: 0vmin; --y: 0.15vmin; } body #wrap .num:nth-of-type(23) .inner:before { content: "5"; } body #wrap .num:nth-of-type(24) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; --x: 0.65vmin; } body #wrap .num:nth-of-type(24):nth-of-type(even) { --x: 0vmin; --y: 0.4vmin; } body #wrap .num:nth-of-type(24) .inner:before { content: "4"; } body #wrap .num:nth-of-type(25) { -webkit-animation-delay: -1.25s; animation-delay: -1.25s; --x: 0.25vmin; } body #wrap .num:nth-of-type(25):nth-of-type(even) { --x: 0vmin; --y: 0.4vmin; } body #wrap .num:nth-of-type(25) .inner:before { content: "7"; } body #wrap .num:nth-of-type(26) { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; --x: 0.65vmin; } body #wrap .num:nth-of-type(26):nth-of-type(even) { --x: 0vmin; --y: 0.3vmin; } body #wrap .num:nth-of-type(26) .inner:before { content: "8"; } body #wrap .num:nth-of-type(27) { -webkit-animation-delay: -1.35s; animation-delay: -1.35s; --x: 0.35vmin; } body #wrap .num:nth-of-type(27):nth-of-type(even) { --x: 0vmin; --y: 0.55vmin; } body #wrap .num:nth-of-type(27) .inner:before { content: "4"; } body #wrap .num:nth-of-type(28) { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; --x: 0.15vmin; } body #wrap .num:nth-of-type(28):nth-of-type(even) { --x: 0vmin; --y: 0.15vmin; } body #wrap .num:nth-of-type(28) .inner:before { content: "5"; } body #wrap .num:nth-of-type(29) { -webkit-animation-delay: -1.45s; animation-delay: -1.45s; --x: 0.25vmin; } body #wrap .num:nth-of-type(29):nth-of-type(even) { --x: 0vmin; --y: 0.55vmin; } body #wrap .num:nth-of-type(29) .inner:before { content: "6"; } body #wrap .num:nth-of-type(30) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; --x: 0.6vmin; } body #wrap .num:nth-of-type(30):nth-of-type(even) { --x: 0vmin; --y: 0.7vmin; } body #wrap .num:nth-of-type(30) .inner:before { content: "3"; } body #wrap .num:nth-of-type(31) { -webkit-animation-delay: -1.55s; animation-delay: -1.55s; --x: 0.2vmin; } body #wrap .num:nth-of-type(31):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(31) .inner:before { content: "9"; } body #wrap .num:nth-of-type(32) { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; --x: 0.7vmin; } body #wrap .num:nth-of-type(32):nth-of-type(even) { --x: 0vmin; --y: 0.6vmin; } body #wrap .num:nth-of-type(32) .inner:before { content: "3"; } body #wrap .num:nth-of-type(33) { -webkit-animation-delay: -1.65s; animation-delay: -1.65s; --x: 0.35vmin; } body #wrap .num:nth-of-type(33):nth-of-type(even) { --x: 0vmin; --y: 0.55vmin; } body #wrap .num:nth-of-type(33) .inner:before { content: "8"; } body #wrap .num:nth-of-type(34) { -webkit-animation-delay: -1.7s; animation-delay: -1.7s; --x: 0.65vmin; } body #wrap .num:nth-of-type(34):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(34) .inner:before { content: "4"; } body #wrap .num:nth-of-type(35) { -webkit-animation-delay: -1.75s; animation-delay: -1.75s; --x: 0.3vmin; } body #wrap .num:nth-of-type(35):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(35) .inner:before { content: "5"; } body #wrap .num:nth-of-type(36) { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; --x: 0.25vmin; } body #wrap .num:nth-of-type(36):nth-of-type(even) { --x: 0vmin; --y: 0.45vmin; } body #wrap .num:nth-of-type(36) .inner:before { content: "3"; } body #wrap .num:nth-of-type(37) { -webkit-animation-delay: -1.85s; animation-delay: -1.85s; --x: 0.5vmin; } body #wrap .num:nth-of-type(37):nth-of-type(even) { --x: 0vmin; --y: 0.6vmin; } body #wrap .num:nth-of-type(37) .inner:before { content: "5"; } body #wrap .num:nth-of-type(38) { -webkit-animation-delay: -1.9s; animation-delay: -1.9s; --x: 0.1vmin; } body #wrap .num:nth-of-type(38):nth-of-type(even) { --x: 0vmin; --y: 0.5vmin; } body #wrap .num:nth-of-type(38) .inner:before { content: "0"; } body #wrap .num:nth-of-type(39) { -webkit-animation-delay: -1.95s; animation-delay: -1.95s; --x: 0.15vmin; } body #wrap .num:nth-of-type(39):nth-of-type(even) { --x: 0vmin; --y: 0vmin; } body #wrap .num:nth-of-type(39) .inner:before { content: "7"; } body #wrap .num:nth-of-type(40) { -webkit-animation-delay: -2s; animation-delay: -2s; --x: 0.15vmin; } body #wrap .num:nth-of-type(40):nth-of-type(even) { --x: 0vmin; --y: 0.35vmin; } body #wrap .num:nth-of-type(40) .inner:before { content: "2"; } body #wrap .num:nth-of-type(41) { -webkit-animation-delay: -2.05s; animation-delay: -2.05s; --x: 0.35vmin; } body #wrap .num:nth-of-type(41):nth-of-type(even) { --x: 0vmin; --y: 0.1vmin; } body #wrap .num:nth-of-type(41) .inner:before { content: "8"; } body #wrap .num:nth-of-type(42) { -webkit-animation-delay: -2.1s; animation-delay: -2.1s; --x: 0.4vmin; } body #wrap .num:nth-of-type(42):nth-of-type(even) { --x: 0vmin; --y: 0.3vmin; } body #wrap .num:nth-of-type(42) .inner:before { content: "4"; } body #wrap .num:nth-of-type(43) { -webkit-animation-delay: -2.15s; animation-delay: -2.15s; --x: 0.45vmin; } body #wrap .num:nth-of-type(43):nth-of-type(even) { --x: 0vmin; --y: 0.3vmin; } body #wrap .num:nth-of-type(43) .inner:before { content: "3"; } body #wrap .num:nth-of-type(44) { -webkit-animation-delay: -2.2s; animation-delay: -2.2s; --x: 0.2vmin; } body #wrap .num:nth-of-type(44):nth-of-type(even) { --x: 0vmin; --y: 0.05vmin; } body #wrap .num:nth-of-type(44) .inner:before { content: "8"; } body #wrap .num:nth-of-type(45) { -webkit-animation-delay: -2.25s; animation-delay: -2.25s; --x: 0.55vmin; } body #wrap .num:nth-of-type(45):nth-of-type(even) { --x: 0vmin; --y: 0.3vmin; } body #wrap .num:nth-of-type(45) .inner:before { content: "5"; } body #wrap .num:nth-of-type(46) { -webkit-animation-delay: -2.3s; animation-delay: -2.3s; --x: 0.05vmin; } body #wrap .num:nth-of-type(46):nth-of-type(even) { --x: 0vmin; --y: 0.4vmin; } body #wrap .num:nth-of-type(46) .inner:before { content: "1"; } body #wrap .num:nth-of-type(47) { -webkit-animation-delay: -2.35s; animation-delay: -2.35s; --x: 0.2vmin; } body #wrap .num:nth-of-type(47):nth-of-type(even) { --x: 0vmin; --y: 0.5vmin; } body #wrap .num:nth-of-type(47) .inner:before { content: "9"; } body #wrap .num:nth-of-type(48) { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; --x: 0.2vmin; } body #wrap .num:nth-of-type(48):nth-of-type(even) { --x: 0vmin; --y: 0.7vmin; } body #wrap .num:nth-of-type(48) .inner:before { content: "2"; } body #wrap .num:nth-of-type(49) { -webkit-animation-delay: -2.45s; animation-delay: -2.45s; --x: 0.7vmin; } body #wrap .num:nth-of-type(49):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(49) .inner:before { content: "3"; } body #wrap .num:nth-of-type(50) { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; --x: 0.6vmin; } body #wrap .num:nth-of-type(50):nth-of-type(even) { --x: 0vmin; --y: 0.1vmin; } body #wrap .num:nth-of-type(50) .inner:before { content: "1"; } body #wrap .num:nth-of-type(51) { -webkit-animation-delay: -2.55s; animation-delay: -2.55s; --x: 0.45vmin; } body #wrap .num:nth-of-type(51):nth-of-type(even) { --x: 0vmin; --y: 0.55vmin; } body #wrap .num:nth-of-type(51) .inner:before { content: "2"; } body #wrap .num:nth-of-type(52) { -webkit-animation-delay: -2.6s; animation-delay: -2.6s; --x: 0.55vmin; } body #wrap .num:nth-of-type(52):nth-of-type(even) { --x: 0vmin; --y: 0.6vmin; } body #wrap .num:nth-of-type(52) .inner:before { content: "9"; } body #wrap .num:nth-of-type(53) { -webkit-animation-delay: -2.65s; animation-delay: -2.65s; --x: 0.45vmin; } body #wrap .num:nth-of-type(53):nth-of-type(even) { --x: 0vmin; --y: 0.65vmin; } body #wrap .num:nth-of-type(53) .inner:before { content: "4"; } body #wrap .num:nth-of-type(54) { -webkit-animation-delay: -2.7s; animation-delay: -2.7s; --x: 0vmin; } body #wrap .num:nth-of-type(54):nth-of-type(even) { --x: 0vmin; --y: 0.15vmin; } body #wrap .num:nth-of-type(54) .inner:before { content: "6"; } body #wrap .num:nth-of-type(55) { -webkit-animation-delay: -2.75s; animation-delay: -2.75s; --x: 0.1vmin; } body #wrap .num:nth-of-type(55):nth-of-type(even) { --x: 0vmin; --y: 0.2vmin; } body #wrap .num:nth-of-type(55) .inner:before { content: "4"; } body #wrap .num:nth-of-type(56) { -webkit-animation-delay: -2.8s; animation-delay: -2.8s; --x: 0.6vmin; } body #wrap .num:nth-of-type(56):nth-of-type(even) { --x: 0vmin; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0