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

css绘制三位国王效果代码

代码语言：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 {
         .........完整代码请登录后点击上方下载按钮下载查看