react模仿手机侧边栏菜单滑出动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:react模仿手机侧边栏菜单滑出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { font-family: "Dosis", sans-serif; font-weight: normal; font-size: 16px; } .app { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; } main { position: relative; width: 320px; height: 550px; margin: 20px auto; overflow: hidden; box-shadow: 0 3px 6px 0 #ccc; border-radius: 12px; } .navigationBackground { width: 100%; height: 100%; background-image: linear-gradient(115deg, #f1c25d, #fc786a); top: 0; left: 0; position: absolute; z-index: 1; } .navTrigger { position: absolute; top: 0; left: 0; padding: 15px; cursor: pointer; } .navTrigger svg { transform: rotate(90deg) scaleX(-1); } .content { width: 100%; height: 100%; position: absolute; background: #fff; z-index: 2; transition: transform 0.4s linear, opacity 0.2s linear 0.2s, border-radius 0.45s, visibility 0s linear 0.4s; transition-timing-function: cubic-bezier(0, 0.2, 0.25, 1), linear, linear; } .content.scaled { transform: scale(0.9) translateX(84.365%); border-radius: 20px 0 0 20px; box-shadow: 0 3px 22px 0 #bd744b; transition-timing-function: cubic-bezier(0.8, 0, 0.6, 1), linear, linear; } .content .contentInner { width: 100%; height: 100%; overflow-x: auto; } .content .contentInner h1 { padding-top: 3px; font-size: 1.33rem; text-align: center; font-weight: 500; } </style> </head> <body> <div class="app"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-with-addons.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script > "use strict"; const NavigationMenu = props => { return React.createElement("section&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0