gsap+MorphSVGPlugin3实现菜单底部弹出变形动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:gsap+MorphSVGPlugin3实现菜单底部弹出变形动画效果代码
代码标签: 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; } .menu__item:hover { background-color: #e1f1fe; } .menu__item:active { background-color: #d8e8f5; } .menu--morph { display: flex; flex-direction: column; align-items: center; overflow: hidden; background: none; box-shadow: none; transition: ease-in 0.18s; border-radius: 16px; } .menu--morph .menu__list { min-width: 180px; text-align: center; transition: ease-in 0.18s; transform: scaleY(0); transform-origin: bottom center; pointer-events: none; } .menu--morph:before { content: " "; position: absolute; width: 64px; height: 64px; bottom: 0; left: 0; right: 0; margin: auto; background-color: #2299ff; border-radius: 50%; transition: ease-out 0.2s; z-index: -1; } .menu--morph .button { background: none; } .menu--fab { margin-bottom: 24px; } .menu--active { box-shadow: 4px 0px 16px rgba(10, 40, 60, 0.12); ransition: ease-in 0.18s 0.18s; } .menu--active:before { transform: scale(20); transition: ease-in 0.18s; background-color: #ffffff; } .menu--active .menu__list { transition: ease-in 0.18s 0.18s; transform: scaleY(1); pointer-events: all; } .menu--active .button { margin-bottom: 16px; background: #e1f1fe; } .menu--active .button:hover { background-color: #d8e8f5; } .menu--active .button .button__icon path { fill: #2299ff; } .button { display: flex; align-items: center; padding: 16px 24px; background-color: transparent; border: none; transition: ease-out 0.18s; cursor: pointer; } .button--primary { background-color: #2299ff; color: #ffffff; } .button--primary .button__icon path { fill: #ffffff; } .button--primary #close { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0