高光渐变调节滑块效果-html代码-BFW代码库

高光渐变调节滑块效果

代码语言：html

代码描述：高光渐变调节滑块效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.demo {
  inline-size: 75vmin;
  block-size: 75vmin;
  border-radius: 1ch;
  
  --cyanHSL: 180 100% 50%;
  --pinkHSL: 328 100% 54%;
  
  background-color: rebeccapurple;
  background-image: 
    radial-gradient(
      circle at var(--radial-1, 100%) var(--radial-3, 0%), 
      hsl(var(--cyanHSL)), hsl(var(--cyanHSL) / 0%)
    ),
    radial-gradient(
      circle at var(--radial-4, 0%) var(--radial-2, 100%), 
      hsl(var(--pinkHSL)), hsl(var(--pinkHSL) / 0%)
    )
  ; 
}

div {
  display: grid;
  grid: 1fr / -webkit-min-content 1fr -webkit-min-content;
  grid: 1fr / min-content 1fr min-content;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
}
</style>

</head>
<body translate="no">
<input id=&q.........完整代码请登录后点击上方下载按钮下载查看