css布局实现一个哈利波特卡通人物效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个哈利波特卡通人物效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --bg: #f1eee3;
          --hair-top: #6c524b;
          --hair-right: #000001;
          --hair-left: #200c06;
          --hair-bottom: #4a2e2a;
          --skin-one: #fedbc3;
          --skin-two: #ed8f6f;
          --scar: #e5aa9c;
          --eyeball-one: #183943;
          --eyeball-two: #356c72;
          --eyebrow: #56361a;
          --eye-one: #eef1f5;
          --eye-two: #d2cfdc;
          --nose-one: #f6c1a3;
          --nose-two: #e69579;
          --mouth: #d19183;
          --cheek: #f8b0ab;
          --glasses-one: #1d1917;
          --glasses-two: #514f52;
          --glasses-bridge: #6d6d71;
          --glass: #ffe4d0;
          --tie-one: #c13422;
          --tie-two: #851312;
          --collar-one: #f2923f;
          --collar-two: #af2c12;
          --badge: #d1701c;
          --wand-one: #6e4e2e;
          --wand-two: #bdab91;
          --wand-glow: #85cade;
          --gown-collar: #929499;
          --gown: #343436;
          --white: #ffffff;
          --black: #000000;
        }
        
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          background-color: var(--bg);
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100vw;
          height: 100vh;
        }
        
        .harry {
          position: relative;
        }
        
        .eye-left,
        .eye-right {
          position: absolute;
          width: 3.6rem;
          height: 3.8rem;
          border-radius: 50%;
          background-color: var(--eye-one);
          box-shadow: inset 0.1rem -0.15rem 0.55rem 0.01rem var(--eye-two),
            0rem -0.1rem 0.15rem 0.01rem var(--skin-one),
            -0.1rem -0.2rem 0.15rem 0.1rem #f4c9b1,
            -0.1rem 0.1rem 0.2rem 0.01rem #f9ddcf,
            inset 0.01rem 0.1rem 0.1rem 0.01rem rgba(0, 0, 0, 0.5);
          filter: blur(0.025rem);
        }
        
        .eye-left {
          left: -4rem;
        }
        
        .eye-right {
          left: 6.5rem;
        }
        
        .eye-left::after,
        .eye-right::after {
          content: "";
          position: absolute;
          width: 3.6rem;
          height: 3.8rem;
          border-radius: 50%;
        }
        
        .eye-left::after {
          box-shadow: inset 0.1rem 0.5rem 0.05rem 0.01rem var(--black);
        }
        
        .eye-right::after {
          box-shadow: inset 0.03rem 0.5rem 0.05rem 0.01rem var(--black);
        }
        
        .eye-left::before,
        .eye-right::before {
          position: absolute;
          content: "";
          width: 2.01rem;
          height: 2.5rem;
          background-image: linear-gradient(
            30deg,
            var(--eyeball-two) 15%,
            var(--eyeball-one) 50%,
            var(--black)
          );
          border-radius: 50%;
          transform: rotate(-17deg);
          left: 1.55rem;
          top: 0.35rem;
          filter: blur(0.01rem);
        }
        
        .eye-glass-left,
        .eye-glass-right {
          position: absolute;
          width: 2.5rem;
          height: 5.5rem;
          border-radius: 50%;
          background-color: var(--glass);
          transform: rotate(45deg);
          top: -3.7rem;
          left: -6rem;
          filter: blur(0.025rem);
          opacity: 0.9;
        }
        
        .eye-glass-right {
          transform: rotate(-205deg) scale(-1);
          left: 4.7rem;
          top: -0.1rem;
          z-index: -1;
        }
        
        .eye-glass-left::after,
        .eye-glass-right::after {
          content: "";
          position: absolute;
          width: 2.4rem;
          height: 6.5rem;
          border-radius: 50%;
          background-color: var(--skin-one);
          top: -0.45rem;
          left: 0.35rem;
        }
        
        .eye-glass-right::after {
          top: -0.55rem;
          left: 0.45rem;
        }
        
        .glasses-left,
        .glasses-right {
          position: absolute;
          width: 10.5rem;
          height: 10.5rem;
          border-radius: 50%;
          border: 0.3rem solid var(--glasses-two);
          top: -4rem;
        }
        
        .glasses-left {
          left: -8.1rem;
          box-shadow: 0rem 0rem 0.07rem 0.25rem var(--glasses-one),
            0rem 0.2rem 0.2rem 0.1rem var(--skin-one), 0rem 0.5rem 0.1rem 0.2rem #f1c3a8,
            inset 0.1rem 0.1rem 0.3rem 0.01rem var(--skin-one),
            inset 0.2rem 0.2rem 0.1rem 0.1rem #f1c3a8;
        }
        
        .glasses-right {
          left: 3.7rem;
          box-shadow: 0rem 0rem 0.07rem 0.25rem var(--glasses-one),
            0rem 0.2rem 0.2rem 0.1rem var(--skin-one), 0rem 0.5rem 0.1rem 0.2rem #f1c3a8,
            inset -0.1rem 0.1rem 0.3rem 0.01rem var(--skin-one),
            inset -0.2rem 0.2rem 0.1rem 0.1rem #f1c3a8;
        }
        
        .glasses-left::after,
        .glasses-right::after {
          content: "";
          position: absolute;
          width: 10.4rem;
          height: 10.4rem;
          border-radius: 50%;
          border: 0.1rem solid var(--glasses-two);
          left: -0.35rem;
          top: -0.35rem;
          box-shadow: 0 0 0.1rem 0.05rem var(--glasses-two),
            inset 0 0 0.1rem 0.1rem var(--glasses-two);
        }
        
        .glasses-bridge {
          position: absolute;
          width: 1.2rem;
          height: 0.6rem;
          background-color: var(--glasses-bridge);
          filter: blur(0.01rem);
          top: 1.3rem;
          left: 2.5rem;
          z-index: -1;
        }
        
        .nose {
          position: absolute;
          width: 2.15rem;
          height: 1.6rem;
          border-radius: 50%;
          background-color: var(--nose-one);
          box-shadow: inset 0rem -0.5rem 0.5rem 0.1rem var(--nose-two);
          top: 3.2rem;
          left: 1.97rem;
          filter: blur(0.025rem) drop-shadow(0 0.3rem 0.1rem #e2c0ad);
        }
        
        .mouth {
          position: absolute;
          width: 2.9rem;
          height: 1.1rem;
          border-bottom: 0.35rem solid var(--mouth);
          border-radius: 0 0 50% 50%/0 0 40% 40%;
          top: 6.2rem;
          left: 1.65rem;
          filter: blur(0.025rem);
        }
        
        .eyebrow {
          position: absolute;
          width: 4.2rem;
          height: 1rem;
          border-radius: 100% 138% 75% 100%/190% 190% 45% 50%;
          background-color: var(--eyebrow);
          top: -5.5rem;
          left: -5.7rem;
          transform: rotate(-12deg);
          filter: blur(0.02rem);
        }
        
        .cheek-left,
        .cheek-right {
          position: absolute;
          width: 3.8rem;
          height: 2.3rem;
          border-radius: 50%;
          background-color: var(--cheek);
          top: 3.8rem;
          z-index: -1;
          filter: blur(0.8rem);
        }
        
        .cheek-left {
          left: -6.1rem;
        }
        
        .cheek-right {
          left: 8.2rem;
        }
        
        .glasses-hand-left,
        .glasses-hand-right {
          position: absolute;
          width: 3.3rem;
          height: 0.6rem;
          border-radius: 3rem;
          background-color: var(--glasses-two);
          z-index: -1;
        }
        
        .glasses-hand-left {
          top: -0.1rem;
          left: -11.1rem;
          transform: rotate(20deg);
          filter: blur(0.032rem);
          box-shadow: inset -0.5rem -0.1rem 0.3rem 0.03rem var(--glasses-one);
        }
        
        .glasses-hand-right {
          top: -0.2rem;
          left: 14rem;
          transform: rotate(-20deg);
          filter: blur(0.032rem);
          box-shadow: inset 0.5rem -0.1rem 0.3rem 0.03rem var(--glasses-one);
        }
        
        .scar {
          position: absolute;
          width: 1rem;
          border-left: 0.5rem solid var(--scar);
          border-top: 2rem solid transparent;
          border-bottom: 0.7rem solid transparent;
          top: -10.1rem;
          left: -4rem;
          transform: rotate(-5deg);
          filter: blur(0.025);
        }
        
        .scar::before {
          content: "";
          position: absolute;
          background-color: var(--scar);
          width: 1.2rem;
          height: 0.3rem;
          transform: rotate(-45deg) skew(-58deg);
          left: -0.6rem;
          top: -0.2rem;
        }
        
        .scar::after {
          content: "";
          position: absolute;
          border-right: 0.4rem solid var(--scar);
          border-bottom: 1.5rem solid transparent;
          border-top: 0.5rem solid transparent;
          left: 0.2rem;
          top: -0.85rem;
          transform: rotate(-3deg);
        }
        
        .head {
          position: absolute;
          width: 28rem;
          height: 26.5rem;
          border-radius: 50%;
          background-color: var(--skin-one);
          box-shadow: inset 0rem -0.5rem 3rem 0.01rem var(--skin-two);
          z-index: -2;
          left: -11rem;
          top: -16rem;
          filter: blur(0.04rem);
        }
        
        .tie {
          position: absolute;
          width: 0.6rem;
          height: 1.02rem;
          border-radius: 40%;
          background-color: var(--tie-one);
          top: 10.2rem;
          left: 2.85rem;
          box-shadow: inset 0rem -0.2rem 0.025rem 0.1rem var(--tie-two);
          z-index: -3;
          filter: blur(0.03rem);
        }
        
        .tie::after,
        .tie::before {
          content: "";
          position: absolute;
          width: 0.5rem;
          height: 1.1rem;
          border-radius: 40%;
          background-color: var(--tie-one);
          top: -0.05rem;
        }
        
        .tie::after {
          left: -0.25rem;
          transform: rotate(-31deg);
          box-shadow: inset 0.05rem 0rem 0.07rem 0.01rem var(--tie-two);
        }
        
        .tie::before {
          left: 0.35rem;
          transform: rotate(31deg);
          box-shadow: inset -0.05rem 0rem 0.07rem 0.01rem var(--tie-two);
        }
        
        .tie-bottom {
          position: absolute;
          border-left: 0.3rem solid transparent;
          border-right: 0.3rem solid transparent;
          border-bottom: 1.5rem solid var(--tie-one);
          top: 10.98rem;
          left: 2.62rem;
          z-index: -4;
          width: 1.05rem;
          filter: blur(0.03rem);
        }
        
        .tie-bottom::after,
        .tie-bottom::before {
          content: "";
          position: absolute;
          width: 0.4rem;
          height: 1.5rem;
        }
        
        .tie-bottom::after {
          box-shadow: inset 0.08rem -0.05rem 0.12rem 0.01rem var(--tie-two);
          transform: rotate(13deg);
          left: -0.15rem;
        }
        
        .tie-bottom::before {
          box-shadow: inset -0.08rem -0.05rem 0.12rem 0.01rem var(--tie-two);
          transform: rotate(-13deg);
          left: 0.22rem;
        }
        
        .shirt {
          position: absolute;
          width: 3.2rem;
          height: 3.2rem;
          transform: rotate(44deg);
          background-color: var(--white);
          top: 8.75rem;
          left: 1.6rem;
          z-index: -5;
          box-shadow: inset -0.1rem -0.1rem 0.8rem 0.01rem #c8d2e5,
            inset -0.05rem -0.05rem 0.3rem 0.2rem var(--white);
        }
        
        .collar {
          position: absolute;
          width: 3.4rem;
          height: 3.4rem;
          transform: rotate(45deg);
          top: 8.5rem;
          left: 1.45rem;
          border: 0.11rem solid var(--collar-two);
          z-index: -3;
          filter: blur(0.025rem);
        }
        
        .collar::before {
          content: "";
          position: absolute;
          width: 3.6rem;
          height: 3.6rem;
          top: -0.6rem;
          left: -0.6rem;
          border: 0.27rem solid var(--collar-one);
          filter: blur(0.025rem);
        }
        
        .collar::after {
          content: "";
          position: absolute;
          width: 4rem;
          height: 4rem;
          top: -0.65rem;
          left: -0.65rem;
          border: 0.11rem solid var(--collar-two);
          filter: blur(0.025rem);
        }
        
        .gown-collar {
          position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看