适合手机端的全屏菜单飞入飞出动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:适合手机端的全屏菜单飞入飞出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; color: #C8C8C8; background-color: #242325; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: #DC965A; text-decoration: none; } /* -------------------------------- Main Components -------------------------------- */ /*header { position: relative; height: 180px; line-height: 180px; } header h1 { font-size: 2.4rem; text-align: center; } @media only screen and (min-width: 1170px) { header { height: 300px; line-height: 300px; } header h1 { font-size: 3.2rem; font-weight: 300; } }*/ .cd-section { padding: 2em; margin-top: 5em; text-align: center; } .cd-bouncy-nav-trigger { /* button style */ background: #DC965A; color: #ffffff; padding: 1.2em 2em; border-radius: 10em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px #171718; } .no-touch .cd-bouncy-nav-trigger:hover { background: #e0a36f; } .cd-bouncy-nav-modal { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(36, 35, 37, 0.9); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s; transition: opacity 0.3s 0.6s, visibility 0s 0.9s; } .cd-bouncy-nav-modal.fade-in { visibility: visible; opacity: 1; -webkit-transition: opacity 0.1s 0s, visibility 0s 0s; -moz-transition: opacity 0.1s 0s, visibility 0s 0s; transition: opacity 0.1s 0s, visibility 0s 0s; } .cd-bouncy-nav-modal .cd-close { display: block; position: fixed; top: 20px; right: 5%; width: 44px; height: 44px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: url("//repo.bfw.wiki/bfwrepo/svg/nav/cd-icon-close.svg") no-repeat center center; -webkit-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -ms-transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s; transition: transform 0.3s 0s, visibility 0s 0.3s; } .cd-bouncy-nav-modal.fade-in .cd-close { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s; transition: transform 0.3s 0s, visibility 0.3s 0s; } @media only screen and (min-width: 1170px) { .cd-bouncy-nav-modal .cd-close { top: 60px; } } .cd-bouncy-nav { position: absolute; left: 50%; top: 50vh; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 300px; } .cd-bouncy-nav li { width: 50%; float: left; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateY(100vh); -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -o-transform: translateY(100vh); transform: translateY(100vh); text-align: center; } .is-visible .cd-bouncy-nav li { /* used to assign a tranlsateY value when the animation is over */ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .fade-in .cd-bouncy-nav li { -webkit-animation: cd-move-in 0.4s; -moz-animation: cd-move-in 0.4s; animation: cd-move-in 0.4s; } .fade-out .cd-bouncy-nav li { -webkit-animation: cd-move-out 0.4s; -moz-animation: cd-move-out 0.4s; animation: cd-move-out 0.4s; } .fade-in .cd-bouncy-nav li, .fade-out .cd-bouncy-nav li { -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .fade-in .cd-bouncy-nav li:nth-of-type(3), .fade-out .cd-bouncy-nav li:nth-of-type(3) { -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; animation-delay: 0.15s; } .fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } .fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .fade-in .cd-bouncy-nav li:nth-of-type(6), .fade-out .cd-bouncy-nav li:nth-of-type(6) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .cd-bouncy-nav a { display: inline-block; min-width: 80px; position: relative; padding: 90px 20px 0; margin-bottom: 30px; color: #ffffff; } .cd-bouncy-nav a::before { /* icons */ content: ''; display: block; position: absolute; top.........完整代码请登录后点击上方下载按钮下载查看
网友评论0