js实现一个颜色色阶渐变生成器效果代码
代码语言:html
所属分类:其他
代码描述: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