js+svg实现滑块调节灯泡亮度及hue值效果代码
代码语言:html
所属分类:其他
代码描述:js+svg实现滑块调节灯泡亮度及hue值效果代码
代码标签: js svg 滑块 调节 灯泡 亮度 hue 值
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;900&display=swap'>
<style>
:root {
--coolwhite: hsl(228, 56%, 98%);
--text-color: hsl(0, 0%, 0%);
--text-color-gray: hsl(0, 0%, 20%);
--hue-wildcard: 180;
--saturation-wildcard: 50%;
--lightness-wildcard: 50%;
}
/* RESETS */
body {
background: var(--coolwhite);
margin: 0;
padding: 0;
min-height: 100%;
font-size: 18px;
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
overflow-y: auto;
font-family: 'Golos Text', sans-serif;
color: var(--text-color);
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
*,
div {
box-sizing: border-box;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
/* Utilities */
.container {
padding: 0 18px;
width: 100%;
max-width: 1200px;
margin-inline: auto;
-webkit-margin-before: 5rem;
margin-block-start: 5rem;
}
.flexrow {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flexcol {
position: relative;
width: auto;
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
padding: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexcol--half {
flex: 0 0 50%;
max-width: 50%;
@media (max-width: 992px) {
flex: 0 0 60%;
max-width: 60%;
}
@media (max-width: 768px) {
flex: 0 0 100%;
max-width: 100%;
}
@media (max-width: 576px) {
flex: 0 0 100%;
max-width: 100%;
}.........完整代码请登录后点击上方下载按钮下载查看
网友评论0