纯css实现一个蛋糕唱歌k歌跳舞动画效果代码-html代码-BFW代码库

纯css实现一个蛋糕唱歌k歌跳舞动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css实现一个蛋糕唱歌k歌跳舞动画效果代码，带声音。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {
          --bg: #fff;
          background: var(--bg);
          overflow: hidden;
        }
        
        @property --top {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --notepos {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        
        @property --open {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 0%;
        }
        @property --note {
          syntax: '<color>';
          inherits: false;
          initial-value: purple;
        }
        
        @keyframes dance {
          0% { --top: 0%; --open: 0%; transform-origin: 60% 90%; }
          25% { --top: 10%; transform-origin: 60% 90%; transform: translate(-50%, 0%) rotate(3deg); }
          33% { --open: 8%;  }
          50% { --top: 0%; --open: 0%; transform: translate(-50%, 0%) rotate(0deg); }
          75% { --top: 7%; --open: % 10%; transform-origin: 40% 90%; transform: translate(-50%, 0%) rotate(-3d.........完整代码请登录后点击上方下载按钮下载查看