gsap+MorphSVGPlugin3实现菜单底部弹出变形动画效果代码-html代码-BFW代码库

gsap+MorphSVGPlugin3实现菜单底部弹出变形动画效果代码

代码语言：html

代码描述：gsap+MorphSVGPlugin3实现菜单底部弹出变形动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap");
        * {
          box-sizing: border-box;
        }
        
        body,
        html {
          height: 100%;
          margin: 0;
        }
        
        body {
          font-family: Poppins, sans-serif;
          font-weight: 300;
          color: #011133;
          display: flex;
          align-items: end;
          justify-content: center;
          padding-bottom: 24px;
          background-color: #f4f7fa;
        }
        
        .menu {
          position: relative;
          background-color: #ffffff;
          box-shadow: 4px 0px 16px rgba(10, 40, 60, 0.12);
          border-radius: 16px;
        }
        .menu__list {
          display: flex;
          flex-direction: column;
          padding: 24px 0;
        }
        .menu__item {
          padding: 12px 24px;
          color: #58788f;
          transition: ease-out 0.18s;
          cursor: pointer;
        }
        ..........完整代码请登录后点击上方下载按钮下载查看