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>
        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;
        }
        
        ..........完整代码请登录后点击上方下载按钮下载查看