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-events: none;
        }
        
        .gnome {
          display: grid;
          grid-template-areas: "gnome";
          place-items: center;
          inline-size: var(--size);
          block-size: var(--size);
        }
        
        .gnome > * {
          grid-area: gnome;
          position: relative;
        }
        
        .hat {
          --s: calc(var(--size) / 1.25);
        
          place-self: start center;
          inset-block-start: calc(var(--size) / 8);
          inline-size: var(--s);
          block-size: var(--s);
          background-color: var(--color-hat);
          border-radius: calc(var(--size) / 10);
          -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 25%);
                  clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 0 25%);
          transform: rotate(-45deg);
        }
        
        .nose {
          --s: calc(var(--size) / 4);
        
          m.........完整代码请登录后点击上方下载按钮下载查看