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

代码语言:html

所属分类:布局界面

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

代码标签: 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% /.........完整代码请登录后点击上方下载按钮下载查看

网友评论0