velocity实现一个全屏菜单自适应弹出动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:velocity实现一个全屏菜单自适应弹出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic); body { background-color: #fff; padding: 0; margin: 0; } .home { width: 100%; height: 100vh; position: relative; background-image: url(//repo.bfw.wiki/bfwrepo/image/5fd82faab9c8f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90); background-size: cover; background-position: center center; } /* ==================================== Navigation ==================================== */ .overlay-navigation { position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 100%, 0.2); display: none; opacity: 0; } nav, nav ul { width: 100%; height: 100%; margin: 0; padding: 0; } nav ul { display: -webkit-box; display: flex; list-style: none; } nav ul li { flex-basis: 20%; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100%; overflow: hidden; opacity: 0; display: none; } nav li a { position: relative; top: 46%; color: #fff; text-transform: uppercase; font-family: 'Work sans', sans-serif; font-weight: 300; letter-spacing: 4px; text-decoration: none; display: block; text-align: center; font-size: 0.9rem; opacity: 0; } nav li a:before { content: ''; width: 70px; height: 2px; background-color: #fff; position: absolute; top: 50%; left: 0; z-index: 100; -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } nav li a:after { content: attr(data-content); font-size: 0.7rem; -webkit-transition: all .2s linear; transition: all .2s linear; opacity: 0; position: absolute; z-index: 100; color: #fff; display: block; margin-right: auto; margin-left: auto; left: 0; right: 0; bottom: -50px; text-transform: none; font-family: 'Open sans', sans-serif; font-weight: 300; font-style: italic; letter-spacing: 0; } nav li a:hover:before { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } nav li a:hover:after { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 1; } nav li:nth-of-type(1) { background-color: #29363B } nav li:nth-of-type(2) { background-color: #EA495F } nav li:nth-of-type(3) { background-color: #F4837D } nav li:nth-of-type(4) { background-color: #FDCEA9 } nav li:nth-of-type(5) { background-color: #99B998 } /* ==================================== Burger king ==================================== */ .open-overlay { position: absolute; right: 5rem; top: 3.2rem; z-index: 100; width: 34px; display: block; cursor: pointer; } .open-overlay span { display: block; height: 1px; background-color: #fff; cursor: pointer; margin-top: 8px; } .animate-top-bar { -webkit-animation: animate-top-bar .6s linear 1 both; animation: animate-top-bar .6s linear 1 both } .animate-bottom-bar { -webkit-animation: animate-bottom-bar .6s linear 1 both; animation: animate-bottom-bar .6s linear 1 both } .animate-middle-bar { -webkit-animation: animate-middle-bar .6s linear 1 both; animation: animate-middle-bar .6s linear 1 both } .animate-out-top-bar { -webkit-animation: animate-out-top-bar .6s linear 1 both; animation: animate-out-top-bar .6s linear 1 both } .animate-out-bottom-bar { -webkit-animation: animate-out-bottom-bar .6s linear 1 both; animation: animate-out-bottom-bar .6s linear 1 both } .animate-out-middle-bar { -webkit-animation: animate-out-middle-bar .6s linear 1 both; animation: animate-out-middle-bar .6s linear 1 both } /* ==================================== Animation keyframes ==================================== */ @-webkit-keyframes animate-top-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #fff } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @keyframes animate-top-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #fff } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @-webkit-keyframes animate-bottom-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #fff; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @keyframes animate-bottom-bar { 0% { background-color: #fff; } 50% { -webkit-transform: translateY(-9px); transform: translateY(-9px) } 80% { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: #fff; } 100% { -webkit-transform: translateY(0); transform: translateY(0); background-color: #29363B; } } @-webkit-keyframes animate-middle-bar { 0% { background-color: #fff; } 80% { background-color: #fff; } 100% { background-color: #29363B; } } @keyframes animate-middle-bar { 0% { background-color: #fff; } 80% { background-color: #fff; } 100% { background-color: #29363B; } } @-webkit-keyframes animate-out-top-bar { 0% { background-color: #29363B } 50% { -webkit-transform: translateY(9px); transform: translateY(9px) } 80% { -webkit-transform: translateY(5px); transform: translateY(5px); background-color: #29363B } 100% { -webkit-transform: translateY(0); transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0