div+css布局实现彩色渐变色卡效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现彩色渐变色卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --stops: 9.5; --stop-1: calc(100% / var(--stops) * 1); --stop-2: calc(100% / var(--stops) * 2); --stop-3: calc(100% / var(--stops) * 3); --stop-4: calc(100% / var(--stops) * 4); --stop-5: calc(100% / var(--stops) * 5); --stop-6: calc(100% / var(--stops) * 6); --stop-7: calc(100% / var(--stops) * 7); --lightness-step-1: 1.60; --lightness-step-2: 1.50; --lightness-step-3: 1.20; --lightness-step-4: 1.00; --lightness-step-5: 0.70; --lightness-step-6: 0.50; --lightness-step-7: 0.40; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #333; } div { margin: 5dvh auto 0; width: min(80dvh, 100%); aspect-ratio: 1; position: relative; border-radius: 50%; & span { width: 100%; aspect-ratio: 1; position: absolute; z-index: -1; background: radial-gradient( circle, hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-1))) 0, hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-1))) var(--stop-1), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-2))) var(--stop-1), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-2))) var(--stop-2), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-3))) var(--stop-2), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-3))) var(--stop-3), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-4))) var(--stop-3), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-4))) var(--stop-4), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-5))) var(--stop-4), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-5))) var(--stop-5), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-6))) var(--stop-5), hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-6))) var(--stop-6), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0