css布局实现一个胡子邋遢的男人头像代码-html代码-BFW代码库

css布局实现一个胡子邋遢的男人头像代码

代码语言：html

代码描述：css布局实现一个胡子邋遢的男人头像代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        article {
          --skin: #f85;
          --skin-dark: #e63;
          --line: #831;
          --hair: #420;
          --shirt: #eed;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 90vmin;
          aspect-ratio: 1;
          overflow: hidden;
          -webkit-mask:
            radial-gradient(farthest-side, #000 85%, #0000)
            ;
          background:
            /* hair */
            radial-gradient(farthest-side at 40% 60%, var(--hair) 99.2%, #0000 99.9%) 58% 17% / 30% 10.5%,
            radial-gradient(farthest-side, var(--hair) 99%, #0000 99.9%) 68% 32%/ 11.5% 25%,
            conic-gradient(at 100% 0, #0000 200deg, var(--hair) 0 240deg, #0000 0) 40% 13% / 14% 7%,
            radial-gradient(100% 75% at 110% 50%, #0000 74%, var(--hair) 75%) 44% 12%/ 5% 7.6%,
            radial-gradient(farthest-side at 100% 50%, var(--hair) 99.25%, #0000 99.9%) 28% 13.07% / 20% 15%,
            linear-gradient(#0000 50%, var(--hair) 0) 54% 13%/ 25% 15%,
            /* facial lines */
            radial-gradient(farthest-side at 50% 100%, var(--hair) 98.5%, #0000 99.9%) 34% 37% / 12% 3%,
            radial-gradient(farthest-side at 50% 100%, var(--hair) 98.5%, #0000 99.9%) 51% 37% / 12% 3%,
            radial-gradient(farthest-side, var(--line) 90%, #0000 99.9%) 43% 33% / 15% 0.5%,
            radial-gradient(farthest-side, var(--line) 90%, #0000 99.9%) 43% 31.5% / 17% 0.75%,
            /* mouth */
            radial-gradient(farthest-side at 50% 0%, var(--skin-dark) 99%, #0000 99.9%) 43% 57% / 12% 3%,
            radial-gradient(farthest-side at 50% 0%, var(--line) 99%, #0000 99.9%) 43% 57% / 11% 5%,
            /* eyes */
            radial-gradient(farthest-side, #fff 90%, #0000 99.9%) 35% 39.5% / 0.75% 0.75%,
            radial-gradient(farthest-side, #fff 90%, #0000 99.9%) 48.25% 39.5% / 0.75% 0.75%,
            radial-gradient(farthest-side, #000 95%, #0000 99.9%) 36% 39% / 3% 3%,
            radial-gradient(farthest-side, #000 95%, #0000 99.9%) 49.5% 39% / 3% 3%,
            radial-gradient(farthest-side at 50% 20%, #fff 99%, #0000 99.9%) 36% 40% / 8% 5%,
            radial-gradient(farthest-side at 50% 20%, #fff 99%, #0000 99.9%) 50% 40% / 8% 5%,
            /* face and chin */
            radial-gradient(farthest-side at 50% 100%, var(--skin) 99.5%, #0000 99.9%) 48.25% 23.25% / 37% 20%,
            radial-gradient(farthest-side at 50% 0%, var(--skin) 99.5%, #0000 99.9%) 50% 55% / 35% 30%,
            radial-gradient(farthest-side, var(--skin) 99.5%, #0000 99.9%) 47% 64% / 23% 13%,
            /* lines */
            radial-gradient(farthest-side at 50% 100%, var(--line) 99.5%, #0000 99.9%) 48.75% 21% / 37% 20%,
            radial-gradient(farthest-side at 50% 0%, var(--line) 93.5%, #0000 94%) 49% 60% / 35% 25%,
            radial-gradient(farthest-side, var(--line) 99.4%, #0000 99.9%) 46% 64.75% / 23.5% 13.25%,
            /* neck */
            linear-gradient(var(--skin) 0 0) 54% 80% / 17% 30%,
            linear-gradient(var(--line) 0 0) 54.5% 80% / 17.5% 22.5%,
            radial-gradient(farthest-side, var(--hair) 99.9%, #0000 0) 61% 54%/ 17% 19%,
            #f000;
            ;
  .........完整代码请登录后点击上方下载按钮下载查看