css+js实现拖动range滑块气泡数值显示跟随效果代码
代码语言:html
所属分类:拖放
代码描述:css+js实现拖动range滑块气泡数值显示跟随效果代码
代码标签: css js 拖动 range 滑块 气泡 数值 显示 跟随
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> * { margin: 0; padding: 0; font-family: "Arial", sans-serif; } html, body { display: grid; height: 100%; text-align: center; place-items: center; background: black; } .range { height: 80px; width: 380px; background: #fff; border-radius: 10px; padding: 0 65px 0 45px; } .range .sliderValue { position: relative; width: 100%; } .range .sliderValue span { position: absolute; height: 45px; width: 380px; color: white; font-weight: 500; top: -40px; transform: translateX(-50%) scale(0); transform-origin: bottom; transition: transform 0.3s ease-in-out; line-height: 55px; z-index: 2; } .range .sliderValue span.show { transform: translateX(-50%) scale(1); } .range .sliderValue span:after { position: absolute; content: ""; height: 45px; width: 45px; background: red; left: 50%; transform: translateX(-50%) rotate(45deg); border: solid 3px #fff; z-index: -1; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; } .range .field { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; } .range .field .value { position: absolute; font-size: 18px; font-weight: 600; color: black; } .range .field .value.left { left: -22px;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0