js实现弹性计数器效果代码
代码语言:html
所属分类:其他
代码描述:js实现弹性计数器效果代码,点击鼠标开始计数。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: hsl(0,0%,100%); --fg: hsl(0,0%,0%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body, button { color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--bg); height: 100vh; display: grid; place-items: center; } .counter { background-color: var(--bg); overflow: hidden; position: relative; font-size: 4em; line-height: 1; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .counter__digit, .counter__slash, .counter__shade { display: flex; position: absolute; } .counter__digit { justify-content: flex-end; align-items: center; padding: 0 1ch 0 0; top: 0; left: 0; width: 50%; height: 100%; } .counter__digit[data-prev-numerator] { transform: translateY(-100%); } .counter__digit[data-denominator] { justify-content: flex-start; padding: 0 0 0 1ch; left: 50%; } .counter__slash { background-color: currentColor; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(22.5deg); height: 1em; width: 0.1em; } .counter__sr { clip: rect(1px,1px,1px,1px); overflow: hidden; position: absolute; width: 1px; height: 1px; } .counter__shade { background-color: var(--bg); mix-blend-mode: difference; inset: 0; width: inherit; height: 100%; transform: translateY(-100%); } .counter--inverted .counter__shade { transform: translateY(0); } .counter--running .counter__digit[data-prev-numerator], .counter--running .counter__digit[data-numerator], .counter--running .counter__slash, .counter--running .counter__shade, .counter--running.counter--inverted .counter__shade { animation-duration: 1.25s; animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.75); } .counter--running .counter__slash { animation-name: slashSpin; } .counter--running .counter__digit[data-prev-numerator], .counter--running .counter__shade { animation-name: slideUp1; } .counter--running .counter__digit[data-numerator], .counter--running.counter--inverted .counter__shade { animation-name: slideUp2; } /* Animations */ @keyframes slideUp1 { from { transform: translateY(0); } 20% { transform: translateY(-120%); } 40% { transform: translateY(-90%); } 60% { transform: translateY(-105%); } 80% { transform: translateY(-97.5%); } to { transform: translateY(-100%); } } @keyframes slideUp2 { from { transform: translateY(100%); } 20% { transform: translateY(-20%); } 40% { transform: translateY(10%); } 60% { transform: translateY(-5%); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0