纯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(-3deg);}
          100% { --top: 0%; --open: 0%; }
        }
        
        @keyframes note {
          0% { --note: purple; --notepos: 0%; }
          100% { --note: var(--cheese); --notepos: 10%; }
        }
        
        audio {
          animation: dance 2s linear infinite, note 2s infinite;
          transform-origin: 60% 90%;
          transform: translate(-50%, 0%) rotate(2deg);
          --cheese: #fe3;
          --crust: #ea5;
          --crust-dark: #d94;
          --mouth: #a00;
          --eye: #000;
          --pepperoni: #d12;
          --note: purple;
          --top: 0%;
          --open: 0%;
          --notepos: 5%;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          width: 75vmin;
          height: 100vmin;
          position: absolute;
          display: block;
          bottom: -10vmin;
          box-sizing: border-box;
          left: 50%;
          background: var(--bg);
          z-index: -1;
          background-image: 
            /* crop */
            conic-gradient(at 50% var(--top), var(--bg) 155deg, transparent 0 205deg, var(--bg) 0),
            /* music note */
            radial-gradient(farthest-side, var(--note) 99.9%, transparent 0),
            linear-gradient(var(--note), var(--note)),
            /* arms */
            linear-gradient(272deg, transparent 40%, black 0),
            radial-gradient(farthest-side, black 80%, transparent 0),
            radial-gradient(farthest-side at 0% 50%, transparent 85%, black 0 99%, transparent 0),
            radial-gradient(farthest-side, black 80%, transparent 0),
            /* microphone */
            radial-gradient(farthest-side, #444 99.9%, transparent),
            conic-gradient(at 130% 130%, transparent 309deg, #666 0 321deg, transparent 0),
            /* face */
            radial-gradient(circle at 54% 47%, white 3%, transparent 0),
            radial-gradient(circle at 54% 47%, white 3%, transparent 0),
            radial-gradient(circle, var(--eye) 10%, transparent 0),
            radial-gradient(circle, var(--eye) 10%, transparent 0),
            radial-gradient(ellipse calc(50% + var(--top)) calc(170% + var(--open) * 10) at 50% 0, transparent 25%, var(--cheese) 0),
            linear-gradient(white 10%, transparent 0),
            radial-gradient(circle at 50% 70%, red 20%, var(--mouth) 0),
            /* legs */
            radial-gradient(ellipse 140% 120% at 100% 70%, transparent 60%, black 0 70%, transparent 0),
            radial-gradient(ellipse 140% 120% at 0% 70%, transparent 60%, black.........完整代码请登录后点击上方下载按钮下载查看