css实现水晶球内雪人下雪动画效果代码-html代码-BFW代码库

代码语言：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>
        html {
          background: #cde;
        }
        
        .canvas {
          --size: 80vmin;
          width: var(--size);
          aspect-ratio: 1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        @keyframes shake {
          0%, 50%, 100% {
            transform: translate(-50%, -50%) rotate(0deg) translate(0, 0);
          }
          25% {
            transform: translate(-50%, -50%) rotate(4deg) translate(0, -10%);
          }
          75% {
            transform: translate(-50%, -50%) rotate(-6deg) translate(0, -12%);
          }
        }
        
        .canvas:active {
          animation: shake 1s infinite;
        }
        
        .canvas div,
        .canvas div::before,
        .canvas div::after {
          position: absolute;
          box-sizing: border-box;
          display: block;
        }
        
        .base {
          width: 60%;
          height: 26%;
          bottom: 0;
          left: 20%;
          border-radius: 100% / 40%;
          background:
            radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
            linear-gradient(to right, #0004, #0000, #0004);
          background-color: #222;
        }
        
        .base ~ .base {
          -webkit-mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
          mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
          background:
            radial-gradient(150% 112% at 50% 0%, #000 38%, #0000 0),
            radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
            linear-gradient(to right, #0004, #0000, #0004),
            repeating-linear-gradient(to right, #444 0 1.2%, #666 1.4%, #333 0 2.4%);
          z-index: 3;
        }
        
        .bowl {
          top: 0;
          left: 5%;
          width: 90%;
          height: 90%;
          background-color: #beeeef33;
          border-radius: 50%;
          overflow: hidden;
        }
        
        .bowl + .bowl {
          z-index: 2;
          background: #beeeef33;
          box-shadow: 
            inset 0 0 2vmin #fff8,
            inset 3vmin 0 5vmin #0003,
            inset -3vmin 0 5vmin #0003,
            inset 0 -20vmin 3vmin -14vmin #0007
            ;
        }
        
        .ground {
          width: 80%;
          height: 15%;
          border-radius: 50%;
          background: white;
          top: 69%;
          left: 50%;
          transform: translateX(-50%);  
        }
        
        .snow {
          width: 97.5%;
          height: 95%;
          border-radius: 50%;
          background: linear-gradient(#0000 79%, #eee 0);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 
            inset -2vmin 2vmin 4vmin -2vmin #fffa,
            inset 2vmin 0 4vmin -2vmin #0001;
        }
        
        .reflection {
          width: 45%;
          height: 18%;
          background: #f003;
          background: linear-gradient(#fff4, #fff0);
          border-radius: 50%;
          top: 13%;
          left: 60%;
          transform: rotate(17deg) translateX(-50%);
        }
        
        .canvas:active .shadow {
          opacity: 0;
        }
        
        .shadow {
          width: 100%;
          height: 15%;
          background: radial-gradient(farthest-side, #0008, #0000);
          border-radius: 50%;
          bottom: -4%;
          left: -5%;
          filter: blur(1vmin);
        }
        
        @keyframes snowfall {
          to {
            transform: translate(0, calc(var(--size) * 0.77));
          }
        }
        
        .snowflake {
          left: 50%;
          top: -5%;
          width: 2%;
          height: 2%;
          background: white;
          border-radius: 50%;
          abox-shadow: inset 0.25vmin -0.25vmin 0.25vmin #0002;
          animation: snowfall 4s 1 forwards;
        }
        
        /* this is super ugly, it would be better (or at least cleaner) in SASS */
        .snowflake:nth-child(3n) {
          z-index: 1; 
        }
        .snowflake:nth-child(1)  { left: 25%; animation-delay: 1s; }
        .snowflake:nth-child(2)  { left: 20%; animation-delay: 2s; }
        .snowflake:nth-child(3)  { left: 30%; animation-delay: 3s; }
        .snowflake:nth-child(4)  { left: 40%; animation-delay: 4s; }
        .snowflake:nth-child(5)  { left: 50%; animation-delay: 5s; }
        .snowflake:nth-child(6)  { left: 60%; animation-delay: 1.5s; }
        .snowflake:nth-child(7)  { left: 70%; animation-delay: 2.5s; }
        .snowflake:nth-child(8)  { left: 80%; animation-delay: 3.5s; }
        .snowflake:nth-child(9)  { left: 75%; animation-delay: 4.5s; }
        .snowflake:nth-child(11) { left: 28%; animation-delay: 5.5s; }
        .snowflake:nth-child(12) { left: 19%; animation-delay: 0.5s; }
        .snowflake:nth-child(13) { left: 38%; animation-delay: 1.2s; }
        .snowflake:nth-child(14) { left: 48%; animation-delay: 2.2s; }
        .snowflake:nth-child(15) { left: 58%; animation-delay: 3.2s; }
        .snowflake:nth-child(16) { left: 68%; animation-delay: 4.2s; }
        .snowflake:nth-child(17) { left: 78%; animation-delay: 1.7s; }
        .snowflake:nth-child(18) { left: 82%; animation-delay: 2.7s; }
        .snowflake:nth-child(19) { left: 65%; animation-delay: 3.7s; }
        .snowflake:nth-child(20) { left: 54%; animation-delay: 4.7s; }
        .snowflake:nth-child(21) { left: 24%; animation-delay: 0.25s; }
        .snowflake:nth-child(22) { left: 24%; animation-delay: 0.5s; }
        .snowflake:nth-child(23) { left: 34%; animation-delay: 0.75s; }
        .snowflake:nth-child(24) { left: 44%; animation-delay: 0.6s; }
        .snowflake:nth-child(25) { left: 54%; animation-delay: 2.75s; }
        .snowflake:nth-child(26) { left: 64%; animation-delay: 1.75s; }
        .snowflake:nth-child(27) { left: 74%; animation-delay: 3.75.........完整代码请登录后点击上方下载按钮下载查看