js+css实现hwb颜色调节取值器代码
代码语言:html
所属分类:其他
代码描述:js+css实现hwb颜色调节取值器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } body{ font-family: sans-serif; background-color: rgb(51, 122, 128) } .container{ background-color: rgba(194, 194, 194, 0.3); height: 68vh; max-width: 30vw; margin: 6rem auto; border-radius: .88rem; padding: 1rem 1.6rem; display: block; border: 2px solid rgba(166, 163, 163, 0.595); box-shadow: .5rem .5rem 1.2rem 1rem #1414144d; } h1{ font-size: 9vh; text-align: center; border-bottom: 1.8px solid rgba(245, 245, 245, 0.65); padding-bottom: 0.5rem; } h2{ text-align: center; color: hwb(0 6% 95%); margin-top: .8rem; padding: 8px 0; } .rangeInput{ display: block; padding: 3vh .5rem 6vh ; font-size: 3vh; background-color: rgba(255, 255, 255, 0); margin-top: .5rem; height: 29.2vh; border-radius: .8rem; border-top: 2px solid rgba(245, 245, 245, 0.616); border-bottom: 2px solid rgba(245, 245, 245, 0.616); } .value{ width: 2rem; height: 2rem; border: none; } /* Input inner box */ .field{ background-color: rgba(204, 179, 179, 0.15); height: 8.2vh; max-width: 100%; margin-bottom: 25px; display: flex; justify-content: center; align-items: center; border-radius: .8rem; border: 1px solid rgba(255, 255, 255, 0.386); transition: 0.400ms; } label{ width: 5.5rem; padding-left: 5px; } /* Input*/ .slider{ appearance: none; height: 1.8rem; width: 100%; background: linear-gradient(90deg, rgba(51, 121, 128, 0.85) 60%, transparent 60%); border-radius: .8rem; outline: none; border: none; opacity: 0.7; box-shadow: 0 1px 5px 1px black; -webkit-transition: 0.2s; transition: 0.2s; margin-right: 5px; position: relative; } .slider:hover{ opacity: 1; } .slider::-webkit-slider-thumb{ appearance: none; height: 2rem; width: 2rem; background-color: hwb(38 87% 2% / 0.364); border-radius: 50%; border: 4px solid hwb(0 100% 0% / 0.277); cursor: pointer; } /* responsive */ @media (max-width:1255px){ .container{ min-height: 70vh; min-width: 30vw; padding: 5vh .5rem 3vh ; } .field{ max-height: 8vh; } .slider{ height: 1.5rem; } } @media (max-width:815px){ .container{ min-width: 32vw; } h1{ font-size: 7.8vh; } .rangeInput{ font-size: 2.5vh; } label{ width: 4.2rem; } .slider{ height: 1.3rem; } } @media (max-width:680px){ .container{ min-width: 38vw; } h1{ font-size: 7vh; } .slider{ height: 1.1rem; } label{ width: 2.5rem; } } @media (max-width:520px){ .container{ min-width: 50vw; } } @media (max-width:390px){ .container{ min-width: 60vw; } .rangeInput{ font-size: 2.3vh; } label{ width: 2.2rem; } .slider{ height: .9rem; } } @media (max-height:600px){ .container{ height:100vh; width:25rem; } h2{ font-size: 1.1rem; } label{ font-size:1rem; } .slider{ height: 1.1rem; } .rangeInput{ border-bottom:none; } } </style> </head> <body> <section class="container"> <h1>Color Picker</h1> <h2> HWB: <span id="result"></span> </h2> <div class="rangeInput"> <div class="field"> <label for="hue">H: <span id="hueValue"></span></label> <input type="range" class="slider" id="hue" min="0" max="360" value="184" /.........完整代码请登录后点击上方下载按钮下载查看
网友评论0