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 = initial.map((value) => [value]); for (let i = 0; i < valuesToAdd; i++) { chunkArray[i % (initial.length - 1)].push(null); } for (let i = 0; i < chunkArray.length - 1; i++) { const currentChunk = chunkArray[i]; const nextChunk = chunkArray[i + 1]; const currentValue = currentChunk[0]; const nextValue = nextChunk[0]; for (let j = 1; j < currentChunk.length; j++) { const percent = j / currentChunk.length; currentChunk[j] = fillFunction(percent, currentValue, nextValue); } } return chunkArray.flat(); }; const hxxToCSSo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0