js实现滑块rgb调色器调色并复制效果代码-html代码-BFW代码库

js实现滑块rgb调色器调色并复制效果代码

代码语言：html

所属分类：其他

代码描述：js实现滑块rgb调色器调色并复制效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
* {
  box-sizing: border-box;
  margin: auto;
}

body {
  position: relative;
  height: 100vh;
  display: flex;
  background: #f0f0f0;
  overflow: hidden;
  perspective: 1440px;
}

.bg {
  width: 100%;
  height: 100%;
  display: flex;
}
.bg .container {
  position: relative;
  padding: 100px 50px 50px 50px;
  display: flex;
  background: #f0f0f00f;
  border-radius: 30px;
  mix-blend-mode: difference;
}
.bg .container .channel {
  display: flex;
  flex-direction: column;
}
.bg .container .channel input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 10px;
  transform: rotate(-90deg);
  background: #aaa;
  border-radius: 20px;
  cursor: pointer;
}
.bg .container .channel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #f0f0f0;
  height: 30px;
  width: 15px;
  border-radius: 20px;
}
.bg .container .channel label {
  padding-top: 50px;
  color: #f0f0f0;
  font-size: 2rem;
  font-family: Montserrat;
}
.bg .container .value {
  position: absolute;
  width: 100%;
  left: 0;
  top: 110%;
  padding: 25px;
  background: #f0f0f00f;
  border-radius: 30px;
  color: #f0f0f0;
  font-size: 1.3rem;
  font-family: Montserrat;
  text-align: center;
}
.bg .container .value .copy {
  position: absolute;
  height: 90%;
  right: 25px;
  top: 5%;
  aspect-ratio: 1;
  background: #f0f0f05f;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
}
</style>

  
</head>

<body >
  <div class="bg" data-bind="style:{background: computedValue}">
  <div class="container">
.........完整代码请登录后点击上方下载按钮下载查看