div+css布局孔雀开屏代码-html代码-BFW代码库

div+css布局孔雀开屏代码

代码语言：html

代码描述：div+css布局孔雀开屏代码

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

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        :root {
           
            --bg-sky: oklch(95% 0.06 200); /* Soft sky blue */
            --sun-glow: oklch(98% 0.12 95); /* Bright sun yellow */
            --grass-base: oklch(65% 0.18 145); /* Lush meadow green */
            
            /* Peacock Palette */
            --navy: oklch(35% 0.18 260);
            --teal: oklch(65% 0.15 185);
            --barb: oklch(from var(--teal) calc(l - 0.1) calc(c + 0.05) h);
            --cyan: oklch(80% 0.12 200);
            --gold: oklch(75% 0.18 70);
            --eye-dark: oklch(25% 0.15 270);
            --stem: oklch(from var(--teal) calc(l - 0.2) c h);
            --shadow: oklch(0% 0 0 / 0.15);
            --shadow-dark: oklch(0% 0 0 / 0.3);

            /* Garden Colors */
            --flower-pink: oklch(75% 0.2 350);
            --flower-yellow: oklch(90% 0.18 90);
            --flower-orange: oklch(75% 0.2 50);
            --leaf-green: oklch(55% 0.15 140);

            /* Base Values in OKLCH */
            --white: oklch(100% 0 0);
            --black: oklch(0% 0 0);
            --transparent: oklch(0% 0 0 / 0);
        }

        body {
            background: radial-gradient(
                circle at 50% 30%, 
                var(--sun-glow) 0%, 
                var(--bg-sky) 60%,
                var(--grass-base) 100%
            );
            background-attachment: fixed;
            margin: 0;
            height: 100vh;
            display: grid;
            .........完整代码请登录后点击上方下载按钮下载查看