js+css实现hwb颜色调整修改效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现hwb颜色调整修改效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap'> <style> main { --w: 9%; --b: 31%; --b2: calc(var(--b) + 40%); --h: 203; --h2: calc(var(--h) + 180 - 360); background: hwb(var(--h) var(--w) var(--b)); color: hwb(var(--h2) var(--w) var(--b)); display: grid; place-items: center; height: 100vh; } main > div { gap: 8px; } main > div div { margin: 0; display: grid; grid-template-columns: 5rem 1fr; gap: 4px; text-align: right; } main > div div label { font-size: 1.2rem; } p { font-family: "Rowdies", sans-serif; font-weight: 700; font-size: clamp(1rem, 30vw, 15rem); text-transform: uppercase; line-height: 0.9; text-shadow: 0.1em 0.1em 0 hwb(var(--h2) var(--w) var(--b2)); margin: auto; } input[type=range] { -webkit-appearance: none; margin-right: 15px; width: 200px; height: 7px; background: hwb(var(--h2) var(--w) var(--b2)); border-radius: 5px; background-size: 70% 100%; background-repeat: no-repeat; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: hwb(var(--h2) var(--w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0