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