css实现一个圣诞节鹿-鲁道夫效果代码-html代码-BFW代码库

css实现一个圣诞节鹿-鲁道夫效果代码

代码语言：html

代码描述：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 {
          --size: 70vmin;
          margin: 0;
          padding: 0;
          height: 100vh;
          overflow: hidden;
          background: linear-gradient(#58b, #8be calc(50% + var(--size) / 3), #eee 0, #fff);
        }
        
        .canvas {
          --fur: #c73;
          --fur-light: #d84;
          --fur-lighter: #fa7;
          --fur-dark: #b62;
          --fur-darker: #940;
          width: var(--size);
          aspect-ratio: 1;
          background: #f000;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .canvas div,
        .canvas div::before,
        .canvas div::after {
          position: absolute;
          display: block;
          box-sizing: border-box;
        }
        
        .body {
          top: 45%;
          left: 50%;
          transform: translate(-50%, 0);
          width: 50%;
          height: 30%;
          background: var(--fur);
          border-radius: 70% 0 90% 70%;
          box-shadow: inset -1vmin -5vmin 0 -4vmin var(--fur-light);
          overflow: hidden;
        }
        
        .body::before {
          content: "";
          width: 30%;
          height: 100%;
          background: var(--f.........完整代码请登录后点击上方下载按钮下载查看