单个div+css实现神奇女侠卡通人物效果代码-html代码-BFW代码库

单个div+css实现神奇女侠卡通人物效果代码

代码语言：html

代码描述：单个div+css实现神奇女侠卡通人物效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          margin: 0;
          height: 100vh;
          overflow: hidden;
          background:
            repeating-conic-gradient(at 50% calc(100% - 30vmin), #fff4 0 5%, #fff0 0 10%),
            #beeeef
        }
        
        .wonder {
          --skin: #fdb;
          --hair: #000;
          --line: #000;
          --red: #f44700;
          --blue: #005ea6;
          --yellow: gold;
          color: var(--line);
          width: 50vmin;
          aspect-ratio: 0.8;
          position: absolute;
          bottom: 0%;
          left: 50%;
          transform: translate(-50%, 0%);
          background: 
            /* boots */
            linear-gradient(var(--line) 0 0) 25% 100% / 25% 1%,
            linear-gradient(var(--line) 0 0) 75% 100% / 25% 1%,
            linear-gradient(185deg, #0000 50%, var(--line) 0) 33.6% 85% / 11.5% 2%,
            radial-gradient(100% 50% at 30% 100%, var(--red) 10%, #0000 0),
            linear-gradient(85deg, #0000 20%, var(--line) 21% 25%, var(--red) 26% 30%, #fff 30.5% 35%, var(--red) 0 50%, #0000 0) 34.6% 100% / 25% 15%,
            linear-gradient(80deg, #0000 30%, var(--red) 0 61%, var(--line) 61.5% 65.5%, #0000 66%) 34.6% 100% / 25% 15%,
            linear-gradient(-185deg, #.........完整代码请登录后点击上方下载按钮下载查看