一个div+css实现南瓜头效果代码-html代码-BFW代码库

一个div+css实现南瓜头效果代码

代码语言：html

代码描述：一个div+css实现南瓜头效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        :root {
          --unit-w: 60;
          --unit-h: 50;
          --pumpkin-color: #F08222;
        }
        
        body {
          background: rgb(235,235,235);
          background: #FDBB80;
        }
        
        .pumpkin {
          --w: 35;
          --h: 45;
          --z: 1;
          --pos-x: 10;
          --pos-y: 10;
          width: calc(var(--w) * 1vmin);
          height: calc(var(--h) * 1vmin);
          background: #000;
          background: var(--pumpkin-color);
          border-radius: 50%;
          position: fixed;
          top: 50%;
          left: 50%;
          border: 1px solid #DA6B02;
          transform: translate(-50%, -50%);
          border-top: 1px solid #DA6B02;
          border-bottom: 1px solid #DA6B02;
          box-shadow: calc(var(--pos-x) * 1vmin) 0 0 calc(var(--z) * -1 * 1vmin) var(--pumpkin-color),
            calc(var(--pos-x) * -1vmin) 0 0 calc(var(--z) * -1 * 1vmin) var(--pumpkin-color);
          
        }
        
        .pumpkin::before {
          content: "";
          position: fixed;
          --w: 7;
          --h: 11;
          --x: 18;
          --y: 10;
          top: 20%;
          left: 14%;
          border-radius: 50%;
          width: calc(var(--w) * 1vmin);
          height: calc(var(--h) * 1vmin);
          background: #222;
          box-shadow: ca.........完整代码请登录后点击上方下载按钮下载查看