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: "";.........完整代码请登录后点击上方下载按钮下载查看
网友评论0