css绘制一个雪人效果代码-html代码-BFW代码库

css绘制一个雪人效果代码

代码语言：html

代码描述：css绘制一个雪人效果代码

代码标签： 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: linear-gradient(#adf, #ddd);
        }
        
        
        .canvas {
          width: 80vmin;
          height: 80vmin;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .canvas *,
        .canvas *::before,
        .canvas *::after {
          position: absolute;
          box-sizing: border-box;
          display: block;
        } 
        
        .head {
          width: 43%;
          height: 33%;
          background:
            radial-gradient(170% 100% at 50% 0%, #0005, #0001 37%, #0000 0)
            ;
          background-color: #fff;
          border-radius: 100% / 90% 90% 110% 110%;
          top: 24%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow:
            inset 2vmin 0 6vmin 1vmin #fffa,
            inset -2vmin 0 6vmin 1vmin #fffa,
            inset 0 0 4vmin 1vmin #0004,
            0 0.25vmin 0 1vmin
            ;
        }
        
        .body {
          width: 59%;
          height: 50%;
          background:
            linear-gradient(45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat 118% 47% / 20% 20%,
            linear-gradient(-45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat -15% 45% / 20% 20%,
            radial-gradient(100% 100% at 50% 0%, #0001 34%, #0000 0)
            ;
          background-color: #fff;
          border-radius: 100% / 110% 110% 90% 90%;.........完整代码请登录后点击上方下载按钮下载查看