jquery滚动餐饮菜单点餐效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery滚动餐饮菜单点餐效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> * { padding: 0; margin: 0; box-sizing: border-box } html, body { width: 100%; height: 100%; cursor: default; background: #d6dde5; background: -moz-linear-gradient(left, #d7dde5 0%, #d2dbe5 50%, #d7dde5 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #d7dde5), color-stop(50%, #d2dbe5), color-stop(100%, #d7dde5)); background: -webkit-linear-gradient(left, #d7dde5 0%, #d2dbe5 50%, #d7dde5 100%); background: -o-linear-gradient(left, #d7dde5 0%, #d2dbe5 50%, #d7dde5 100%); background: -ms-linear-gradient(left, #d7dde5 0%, #d2dbe5 50%, #d7dde5 100%); background: linear-gradient(to right, #d7dde5 0%, #d2dbe5 50%, #d7dde5 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6dde5', endColorstr='#d6dde5', GradientType=1) } .rope { position: relative; margin: 0 auto; width: 900px; height: 200px } .rope img { height: 200px } .rope-left { float: left; margin-left: 150px } .rope-right { float: right; margin-right: 150px } .page1 { position: relative; width: 900px; height: 800px; margin: 0 auto; margin-top: -10px } .plate1 { position: absolute; top: 150px; left: 0px; transform: rotate(45deg); -moz-transition: 0.8s ease-out all; -webkit-transition: 0.8s ease-out all; -o-transition: 0.8s ease-out all; -ms-transition: 0.8s ease-out all; transition: 0.8s ease-out all } .plate1-active { left: -250px; transform: rotate(0deg) } .body-wrap { position: relative; width: 100%; height: 100%; background: #2D3A4B; color: #fff; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.5) } .page1-title { width: 100%; z-index: 99; position: absolute; top: 0; left: 20px; font-size: 160px; text-align: center; font-family: "Oswald"; font-weight: 700; letter-spacing: 20px; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .page1-title-active { font-size: 180px; text-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .page1-desc { z-index: 98; position: absolute; top: 220px; width: 85%; left: 235px; padding: 50px; padding-left: 110px; padding-top: 150px; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .page1-desc-active { left: 215px; top: 250px; padding-left: 120px; background: rgba(91, 105, 118, 0.9); box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .page1-desc h3 { font-family: "Oswald"; font-weight: 700; font-size: 2rem; letter-spacing: 10px } .page1-desc hr { margin-top: 20px; margin-bottom: 20px; width: 280px; opacity: 0.5 } .page1-desc p { width: 460px; line-height: 40px; font-size: 1.2rem; opacity: 0.8 } .page2 { position: relative; width: 900px; height: 800px; margin: 0 auto } .pg2-middle-wrap { position: absolute; top: 50%; margin-top: -250px; left: 0; width: 100%; height: 500px } .pg2-green-back { position: absolute; width: 100%; height: 100%; bottom: -15%; right: 0%; background: rgba(205, 211, 95, 0.9); -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .pg2-green-back-active { width: 130%; right: -20%; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .pg2-white-desc { position: absolute; width: 60%; top: 0%; left: 0%; background: #FFF; color: #2D3A4B; text-align: center; -moz-transition: 1s ease-out all; -webkit-transition: 1s ease-out all; -o-transition: 1s ease-out all; -ms-transition: 1s ease-out all; transition: 1s ease-out all } .pg2-white-desc-active { top: -10%; left: -20%; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .pg2-white-desc .hr1 { width: 80%; margin: 0 auto; margin-top: 40px; opacity: 0.4 } .pg2-white-desc .hr2 { width: 40%; margin: 0 auto; opacity: 0.4; margin-bottom: 5px } .pg2-white-desc .hr3 { width: 60%; margin: 0 auto; opacity: 0.4 } .pg2-white-desc .hr4 { width: 60%; margin: 0 auto; opacity: 0.4; margin-bottom: 5px } .pg2-white-desc .hr5 { width: 40%; margin: 0 auto; opacity: 0.4 } .pg2-white-desc .hr6 { width: 80%; margin: 0 auto; margin-bottom: 40px; opacity: 0.4 } .pg2-white-desc h3 { color: #D39F8C; margin: 60px; font-size: 2rem } .pg2-white-desc h2 { font-family: "Oswald"; font-weight: 700; font-size: 4rem; letter-spacing: 10px; opacity: 0.8 } .pg2-white-desc p { width: 60%; font-size: 1.4rem; opacity: 0.8; margin: 0 auto; margin-top: 20px; margin-bottom: 50px; line-height: 30px } .pg2-photo-wrap { position: absolute; width: 70%; height: 120%; top: -20%; right: 0; background: #333; overflow: hidden; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .pg2-photo-wrap-active { right: -10%; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .pg2-photo { position: absolute; left: 0; width: 120%; height: 100%; background-image: url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); background-size: cover; background-position: center center; background-repeat: no-repeat; -moz-transition: 4s ease-out all; -webkit-transition: 4s ease-out all; -o-transition: 4s ease-out all; -ms-transition: 4s ease-out all; transition: 4s ease-out all } .pg2-photo-active { left: -20% } .grapes { position: absolute; top: 150px; left: 0px; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .grapes-active { left: -250px } .page3 { position: relative; width: 900px; height: 800px; margin: 0 auto } .pg3-middle-wrap { position: absolute; top: 50%; margin-top: -250px; left: 0; width: 100%; height: 500px } .pg3-red-back { position: absolute; width: 100%; height: 115%; top: -20%; left: 0; background: rgba(199, 63, 56, 0.9); -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .pg3-red-back-active { box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4); width: 130%; left: -20% } .pg3-white-desc { position: absolute; width: 60%; bottom: 0; left: 0; background: #FFF; color: #2D3A4B; text-align: center; -moz-transition: 0.4s ease-out all; -webkit-transition: 0.4s ease-out all; -o-transition: 0.4s ease-out all; -ms-transition: 0.4s ease-out all; transition: 0.4s ease-out all } .pg3-white-desc-active { bottom: -10%; left: -10%; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .pg3-white-desc .hr1 { width: 80%; margin: 0 auto; margin-top: 40px; opacity: 0.4 } .pg3-white-desc .hr2 { width: 40%; margin: 0 auto; opacity: 0.4; margin-bottom: 5px } .pg3-white-desc .hr3 { width: 60%; margin: 0 auto; opacity: 0.4 } .pg3-white-desc .hr4 { width: 60%; margin: 0 auto; opacity: 0.4; margin-bottom: 5px } .pg3-white-desc .hr5 { width: 40%; margin: 0 auto; opacity: 0.4 } .pg3-white-desc .hr6 { width: 80%; margin: 0 auto; margin-bottom: 40px; opacity: 0.4 } .pg3-white-desc h3 { color: #BA945C; margin: 60px; font-size: 2rem } .pg3-white-desc h2 { font-family: "Oswald"; font-weight: 700; font-size: 4rem; letter-spacing: 10px; opacity: 0.8 } .pg3-white-desc p { width: 60%; font-size: 1.4rem; opacity: 0.8; margin: 0 auto; margin-top: 20px; margin-bottom: 50px; line-height: 30px } .pg3-photo-wrap { position: absolute; width: 100%; height: 105%; bottom: 0; right: 0; background: #333; overflow: hidden; -moz-transition: 1s ease-out all; -webkit-transition: 1s ease-out all; -o-transition: 1s ease-out all; -ms-transition: 1s ease-out all; transition: 1s ease-out all } .pg3-photo-wrap-active { width: 100%; right: -20%; box-shadow: 0px 50px 100px rgba(0, 0, 0, 0.4) } .pg3-photo { position: absolute; left: -20%; width: 120%; height: 100%; background-image: url("https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); background-size: cover; background-position: center center; background-repeat: no-repeat; -moz-transition: 4s ease-out all; -webkit-transition: 4s ease-out all; -o-transition: 4s ease-out all; -ms-transition: 4s ease-out all; transition: 4s ease-out all } .pg3-photo-active { left: 0 } .leafs { position: absolute; bottom: 100px; right: 0px; -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all } .leafs-active { right: -350px } .page4 { position: relative; width: 900px; height: 800px; margin: 0 auto } .pg4-middle-wrap { position: absolute; top: 50%; margin-top: -250px; left: 0; width: 100%; height: 500px } .pg4-bezh-back { position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; background: rgba(252, 219, 136, 0.9); -moz-transition: 0.6s ease-out all; -webkit-transition: 0.6s ease-out all; -o-transition: 0.6s ease-out all; -ms-transition: 0.6s ease-out all; transition: 0.6s ease-out all .........完整代码请登录后点击上方下载按钮下载查看
网友评论0