css绘制三位国王效果代码-html代码-BFW代码库

代码语言：html

代码描述：css绘制三位国王效果代码

代码标签： css 国王

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          background: #cde;
        }
        
        .king {
          --gift: gold;
          --gift-contrast: orange;
          --eye: brown;
          --mouth: pink;
          --skin: #fca;
          --hair: #fff;
          --robe: #5c7;
          --robe-contrast: #294;
          --cape: #073;
          --cheek: #f003;
          width: 45vmin;
          height: 70vmin;
          position: absolute;
        }
        
        .king * {
          position: absolute;
          box-sizing: border-box;
        }
        
        .body {
          width: 65%;
          height: 70%;
          background:
            /* wrists */
            linear-gradient(20deg, #0000 10%, var(--cape) 0 90%, #0000 0) no-repeat 32% 48% / 10% 18%,
            linear-gradient(-20deg, #0000 10%, var(--cape) 0 90%, #0000 0) no-repeat 68% 48% / 10% 18%,
            /* buttons and middle decoration */
            radial-gradient(circle, var(--cape) 5%, #0000 0) repeat-y 50% 0% / 100% 10%,
            conic-gradient(at 50% -100%, #0000 176deg, var(--robe) 0 178deg, var(--robe-contrast) 178.125deg 181.875deg, var(--robe) 182deg 184deg, #0000 0),
            /* arms */
            radial-gradient(90% 90% at 50% 0%, #0000 50%, var(--robe-contrast) 0 65%, #0000 0)
            ;
          background-color: var(--robe);
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 0);
          border-radius: 100% / 200% 200% 10% 10%;
        }
        
        .cape {
          width: 85%;
          height: 65%;
          background-color: var(--cape);
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translate(-50%, 0);
          border-radius: 100% / 200% 200% 5% 5%;
        }
        
        .hands {
          width: 26%;
          height: 18%;
          background:
            radial-gradient(farthest-side at 0% 20%, var(--skin) 50%, #0000 51%),
            radial-gradient(farthest-side at 100% 20%, var(--skin) 50%, #0000 51%)
            ;
          top: 38%;
          left: 50%;
          transform: translate(-50%, 0);
          border-radius: 50%;
        }
        
        .gift {
          width: 20%;
          height: 15%;
          background:
            linear-gradient(var(--gift-contrast) 0 0) 50% 100% / 100% 65%,
            radial-gradient(var(--gift) 50%, #0000 0)
            ;
          background-repeat: no-repeat;
          top: 28%;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .head {
          width: 35%;
          height: 25%;
          border-radius: 50%;
          background:
            /* eyes */
            radial-gradient(circle at 31.5% 45%, #fff 1.5%, #0000 2%),
            radial-gradient(circle at 65.5% 45%, #fff 1.5%, #0000 2%),
            radial-gradient(circle at 33% 47%, var(--eye) 5%, #0000 6%),
            radial-gradient(circle at 67% 47%, var(--eye) 5%, #0000 6%),
            radial-gradient(circle at 50% 110%, #0000 25%, var(--hair) 0 38%, #0000 0) 25% 18% / 28% 25%,
            radial-gradient(circle at 50% 110%, #0000 25%, var(--hair) 0 38%, #0000 0) 75% 18% / 28% 25%,
            /* cheeks */
            radial-gradient(190% 100% at 22% 55.5%, var(--cheek) 4%, #0000 4.5%),
            radial-gradient(190% 100% at 78% 55.5%, var(--cheek) 4%, #0000 4.5%),
            /* hair */
            radial-gradient(circle at 50% 10%, var(--hair) 15%, #0000 16%),
            radial-gradient(circle at 18% 8%, var(--hair) 13%, #0000 13.5%),
            radial-gradient(circle at 82% 12%, var(--hair) 10%, #0000 10.5%),
            radial-gradient(circle at 70% 15%, var(--hair) 5%, #0000 5.5%),
            radial-gradient(circle at 70% 0%, var(--hair) 15%, #0000 5.5%),
            radial-gradient(100% 50% at 50% 100%, var(--hair) 66%, #0000 16%),
            radial-gradient(circle at 0% 51%, var(--hair) 8%, #0000 0),
            radial-gradient(circle at 3% 43%, var(--hair) 6%, #0000 0),
            radial-gradient(100% 100% at 5% 29%, var(--hair) 10%, #0000 0),
            radial-gradient(circle at 100% 51%, var(--hair) 6%, #0000 0),
            radial-gradient(circle at 98% 43%, var(--hair) 8%, #0000 0),
            radial-gradient(100% 100% at 95% 29%, var(--hair) 10%, #0000 0)
            ;
          background-repeat: no-repeat;
          background-color: var(--skin);
          top: 10%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow:
            -7vmin -2vmin 0 -5vmin var(--hair),
            7.5vmin -1vmin 0 -6vmin var(--hair),
            7vmin -4vmin 0 -6.5vmin var(--hair)
            ;
        }
        
        .beard {
          width: 120%;
          height: 60%;
          bottom: -20%;
          left: -10%;
          background:
            /* mouth */
            radial-gradient(circle at 50% 0%, var(--mouth) 20%, #0000 22%) 50% 35% / 60% 30%,
            /* mustache */
            radial-gradient(circle at 38.5% 22%, var(--hair) 16%, #0000 17%),
            radial-gradient(circle at 20% 0%, var(--skin) 10%, #0000 11%),
            radial-gradient(circle at 15% 20%, var(--hair) 13%, #0000 14%),
            radial-gradient(circle at 61.5% 22%, var(--hair) 16%, #0000 17%),
            radial-gradient(circle at 80% 0%, var(--skin) 10%, #0000 11%),
            radial-gradient(circle at 85% 20%, var(--hair) 13%, #0000 14%),
            /* beard */
            radial-gradient(circle at 50% 80%, var(--hair) 15%, #0000 16%),
            radial-gradient(circle at 35% 70%, var(--hair) 15%, #0000 16%),
            radial-gradient(circle at 63% 70%, var(--hair) 14%, #0000 15%),
            radial-gradient(circle at 20% 50%, var(--hair) 13%, #0000 14%),
            radial-gradient(circle at 75% 60%, var(--hair) 8%, #0000 9%),
            radial-gradient(circle at 80% 45%, var(--hair) 11%, #0000 12%)
            ;
          background-repeat: no-repeat;
        }
        
        .cr.........完整代码请登录后点击上方下载按钮下载查看