js+css实现hsl色相、饱和度和亮度颜色选择器代码
代码语言:html
所属分类:其他
代码描述:js+css实现hsl色相、饱和度和亮度颜色选择器代码
代码标签: js css hsl 色相 饱和度 亮度 颜色 选择器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: hsl(0, 60%, 50%); font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 24px; display: flex; justify-content: center; align-items: center; height: 98vh; } h1 { font-size: 36px; } #container { background-color: floralWhite; padding: 25px; width: min-content; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } .slider-container { display: flex; } .slider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; cursor: pointer; height: 9px; width: 300px; border: none; background-color: #aaa; border-radius: 15px; opacity: 0.7; margin: 24px; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 48px; border-radius: 12px; border: none; background: hsl(214, 100%, 50%); transition: .2s ease-in-out; } .slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 16px hsla(214, 100%, 50%, .1); } .slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2) } .slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2) } .slider::-moz-range-thumb { width: 18px; height: 48px; border-radius: 12px; border: none; background: hsl(214, 100%, 50%); transition: .2s ease-in-out; } .slider::-moz-range-thumb:hover { box-shadow: 0 0 0 16px hsla(214, 100%, 50%, .1); } .slider:active::-moz-range-thumb { box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2) } .slider:focus::-moz-range-thumb { box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2) } .value { margin: 14px; width: 34px; } #saturation { background: linear-gradient(to right, hsl(214, 100%, 50%) 60%, #aaa 60%); } #lightness { background: linear-gradient(to right, hsl(214, 100%, 50%) 50%, #aaa 50%); } #hsl { margin: 14px; padding: 7px; border: 2px solid black; } </style> </head> <body> <div id="container"> <h1>HSL Color Picker</h1> <div class="slider-container"> <input type="range" id="hue" class="slider" name="slider" min="0" max="360" step="1" value="0"> <div id="hueValue" class="value">0</div> </di.........完整代码请登录后点击上方下载按钮下载查看
网友评论0