css+js实现炫酷滑动数字显示跳动模糊动画效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现炫酷滑动数字显示跳动模糊动画效果代码
代码标签: css js 炫酷 滑动 数字 显示 跳动 模糊 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .number { display: flex; align-items: center; font-size: 6rem; justify-content: flex-end; } .number .animate { filter: url("#blurFilter"); } .number .left, .number .right { min-width: 11rem; text-align: right; } .number .right { padding-right: 1rem; } .number .separator { opacity: 0; transition: opacity 0.1s ease; } .number .separator.show { opacity: 1; } .svgFilter { display: none; } .slider { accent-color: black; background: red; min-width: min(20rem, 60vw); } .container { display: flex; flex-direction: column; gap: 2rem; } body { display: grid; place-items: center; height: 100vh; width: 100vw; background: #ffc107; font-style: italic; padding: 1; font-weight: bold; } :root { --labs-sys-color-on-background: black; } * { box-sizing: border-box; } </style> </head> <body > <div class="container"> <input id="slider" class="slider" type="range" min="0" max="20000" step="5000" list="values" value="20000"> <datalist id="values"> <option value="0" label="0"></option> <option value="5000" label="5000"></option> <option value="10000" label="10000"></option> <option value="15000" label="15000"></option> <option value="20000" label="20000"></option> </datalist> <div class="number" id="number"> <div class="left" id="left"></div> <div class="separator" id="separator">,</div> <div class="right" id="right.........完整代码请登录后点击上方下载按钮下载查看
网友评论0