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