gsap实现一个大胡子带声音张口发声摇头动画效果代码-html代码-BFW代码库

gsap实现一个大胡子带声音张口发声摇头动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现一个大胡子带声音张口发声摇头动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap");
        
        * {
          box-sizing: border-box;
        }
        
        html,
        body {
          height: 100%;
        }
        
        body {
          --color-bg: #1d1e22;
          --color-text: hsl(0 0% 90%);
          --color-face: #ecc4ab;
          --color-hat: hsl(120 25% 45%);
          --color-beard: var(--color-text);
          --radius: 360px;
        
          display: grid;
          place-items: center;
          place-content: center;
          gap: 10vmin;
          font-family: "Roboto Mono", monospace;
          font-size: clamp(1rem, 3vw, 1.25rem);
          text-transform: uppercase;
          color: var(--color-text);
          background-color: var(--color-bg);
        }
        
        [id="gnome-container"] {
          --size: 50vmin;
          --deg: 15deg;
        
          padding-bottom: calc(var(--size) / 2);
          -webkit-margin-after: calc(var(--size) / -2);
                  margin-block-end: calc(var(--size) / -2);
          transform-origin: 50% 100%;
          pointer-eve.........完整代码请登录后点击上方下载按钮下载查看