vue3实现拖拽式温度调节器效果代码
代码语言:html
所属分类:拖放
代码描述:vue3实现拖拽式温度调节器效果代码
下面为部分代码预览,完整代码请点击下载或在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> @import url("https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu+Mono&display=swap"); *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } :root { --black-soft: #615959; --black: #221e1e; --white: #ececec; --current-color: #66ccff; --thumb-size: 20px; } body { min-height: 100vh; display: grid; place-items: center; font-family: "Poppins", sans-serif; background-color: var(--white); } .container { width: 480px; height: 450px; display: grid; place-content: center; background: radial-gradient( 60% 60% at 70% 20%, var(--black-soft), var(--black) 90% ); color: var(--white); border-radius: 37%; position: relative; } .container::after { content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); z-index: 10; width: 70%; height: 3px; background-color: var(--black); filter: blur(5px); } input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 100%; } /** Chrome, Safari, Opera, and Edge Chromium **/ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--black); border: 2px solid var(--white); cursor: pointer; } /** Firefox **/ input[type="range"]::-moz-range-thumb { border: none; border-radius: 0; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--black); border: 2px solid var(--white); } .slider { width: 250px; height: 300px; /* border: 1px solid silver; */ } .slider-display { display: grid; grid-template-columns: 1fr 50px; position: relative; } .slider-display__icon { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); } .slider-display__icon svg { width: 40px; height: 40px; stroke: var(--current-color); stroke-width: 1; fill: none; } .slider-display__value { width: 240px; height: 250px; display: grid; place-items: center; /* border: 1px solid yellow; */ } .slider-display__value div { width: 100%; text-align: center; /* border: 1px solid silver; */ } .slider-display__value h1 { font-size: 7rem; line-height: 6rem; font-family: "Ubuntu Mono", serif; } .slider-display__value span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; } .slider-display__input { width: 250px; height: 50px; display: grid; align-items: center; transform: rotate(-90deg) translate(-100px, -120px); position: relative; /* border: 1px solid silver; */ } .slider-display__bar { position: absolute; width: 250px; height: 10px; pointer-events: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(5px, 1fr)); justify-items: center; gap: 5px; z-index: -1; margin-top: 5px; } .slider-display__bar span { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background-color: var(--white); } .slider-controls { width: 250px; height: min-content; display: grid; place-items: center; /* border: 1px solid green; */ } .slider-controls__icons { width: 80px; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; margin: 1em 0 1.5em; } .slider-controls__icons svg { width: 24px; height: 24px; stroke: var(--white); stroke-width: 2; opacity: 0.4; cursor: pointer; pointer-events: all; } .slider-controls__icons svg.active { opacity: 1; pointer-events: none; } .slider-controls__logo { width: 100%; font-size: 1.7rem; font-family: "Poppins", sans-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0