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(--fur-lighter);
          right: -10%;
          top: 20%;
          border-radius: var(--size);
        }
        
        .head {
          width: 50%;
          height: 30%;
          top: 12%;
          right: -5%;
          background:
            radial-gradient(farthest-side, var(--fur-lighter) 90%, #0000 0) no-repeat 125% 110% / 60% 90%,
            radial-gradient(farthest-side, #0000 90%, var(--fur-light) 0) no-repeat 90% 85% / 120% 120%
            ;
          background-color: var(--fur);
          border-radius: 120% / 90% 120% 110% 120%;
          transform: rotate(20deg);
          abox-shadow: inset -5vmin -5vmin 0 -5vmin var(--fur-light);
        }
        
        .eye {
          top: -16%;
          left: 14%;
          width: 14%;
          height: 36%;
          background:
            radial-gradient(circle, #fff 50%, #fff0 0) no-repeat 20% 10% / 30% 30%,
            radial-gradient(circle, #fff 20%, #fff0 0) no-repeat 50% 5% / 30% 30%,
            radial-gradient(black 50%, #0000 0) no-repeat 20% 10% / 80% 80%;
            ;
          background-color: white;
          border-radius: 50%;
          transform: rotate(-40deg);
          box-shadow: 0 0 0 1vmin var(--fur);
        }
        
        .eye + .eye {
          width: 15%;
          height: 40%;
          top: 0;
          left: 0;
        }
        
        .mouth {
          bottom: 20%;
          right: 15%;
          width: 15%;
          height: 20%;
          border: 0.75vmin solid #0000;
          border-bottom-color: #000c;
          border-right-width: 0.125vmin;
          border-radius: 50%;
          
        }
        
        .nose {
          width: 25%;
          height: 30%;
          box-shadow: 
            inset -0.5vmin -1vmin #0002,
            0 0 2vmin #f000;
          border-radius: 50%;
          top: 20%;
          right: 10%;
          transform: rotate(-20deg);
          background:
            radial-gradient(#fff3 35%, #0000 0) no-repeat 75% 0% / 50% 50%,
            radial-gradient(#fff3 10%, #0000 0) no-repeat 110% -10% / 50% 50%
            ;
          background-color: #e00;
          transition: all 0.5s;
        }
        
        @keyframes glow {
          0%, 100% {
            box-shadow: 
              inset -0.5vmin -1vmin #0002,
              0 0 2vmin #f000;
            background-color: #e00;
          }
          50% {
            background-color: #f11;
            box-shadow: 
              inset -0.5vmin -1vmin #0002,
              0 0 4vmin #f00f;
          }
        }
        
        .nose:hover {
          animation: glow 2s infinite;
        }
        
        .ear {
          width: 30%;
          height: 30%;
          background: var(--fur);
          box-shadow: inset -1vmin -1vmin var(--fur-light);
          left: -25%;
          top: 30%;
          border-radius: 0 100%;
          transform: rotate(-50deg);
        }
        
        .ear + .ear {
          top: -28%;
          left: 20%;
          transform: rotate(-60deg);
          box-shadow: inset 1v.........完整代码请登录后点击上方下载按钮下载查看