js实现一个颜色色阶渐变生成器效果代码

代码语言:html

所属分类:其他

代码描述:js实现一个颜色色阶渐变生成器效果代码

代码标签: js 颜色 色阶 渐变 生成器

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

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

<head>
 
<meta charset="UTF-8">
 


 
 
<style>
.world {
 
background: linear-gradient(var(--bg));
 
height: 80vmin;
 
width: 60vmin;
 
position: fixed;
 
top: 50%;
 
left: 50%;
 
transform: translate(-50%, -50%);
}
.world::before {
 
content: "";
 
position: absolute;
 
inset: 0;
 
background: inherit;
 
filter: blur(50px);
}

@media (orientation: landscape) {
 
.world {
   
height: 35vmin;
   
width: 80vmin;
   
background: linear-gradient(90deg, var(--bg));
 
}
}
</style>


</head>

<body>
 
<div class="world" data-world></div>

 
     
<script >
const $w = document.querySelector('[data-world]');

const hardStopsGradient = (arrOfColors) => {
  const l = arrOfColors.length;
  return arrOfColors.map(
    (c, i) => `${c} ${i/l*100}% ${(i+1)/l*100}%`
  ).join(',')
}

const scaleSpreadArray = (
  initial,
  targetSize,
  fillFunction = (percent, lastValue, nextValue) => lastValue + percent * (nextValue - lastValue)
) => {
  const valuesToAdd = targetSize - initial.length;
  const chunkArray = i.........完整代码请登录后点击上方下载按钮下载查看

网友评论0