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