自适应全屏分页导航内容效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Raleway"); body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; } .flex-container { position: absolute; height: 100vh; width: 100%; display: -webkit-flex; /* Safari */ display: flex; overflow: hidden; } @media screen and (max-width: 768px) { .flex-container { flex-direction: column; } } .flex-title { color: #f1f1f1; position: relative; font-size: 6vw; margin: auto; text-align: center; transform: rotate(90deg); top: 15%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media screen and (max-width: 768px) { .flex-title { transform: rotate(0deg) !important; } } .flex-about { opacity: 0; color: #f1f1f1; position: relative; width: 70%; font-size: 2vw; padding: 5%; top: 20%; border: 2px solid #f1f1f1; border-radius: 10px; line-height: 1.3; margin: auto; text-align: left; transform: rotate(0deg); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media screen and (max-width: 768px) { .flex-about { padding: 0%; border: 0px solid #f1f1f1; } } .flex-slide { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; cursor: pointer; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media screen and (max-width: 768px) { .flex-slide { overflow: auto; overflow-x: hidden; } } @media screen and (max-width: 768px) { .flex-slide p { font-size: 2em; } } @media screen and (max-width: 768px) { .flex-slide ul li { font-size: 2em; } } .flex-slide:hover { -webkit-flex-grow: 3; flex-grow: 3; } .home { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png); background-size: cover; background-position: center center; background-attachment: fixed; } @media screen and (min-width: 768px) { .home { -moz-animation: aboutFlexSlide; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-delay: 0s; -webkit-animation: aboutFlexSlide; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0s; animation: aboutFlexSlide; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 0s; } } @keyframes aboutFlexSlide { 0% { -webkit-flex-grow: 1; flex-grow: 1; } 50% { -webkit-flex-grow: 3; flex-grow: 3; } 100% { -webkit-flex-grow: 1; flex-grow: 1; } } @media screen and (min-width: 768px) { .flex-title-home { transform: rotate(90deg); top: 15%; -moz-animation: homeFlextitle; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-delay: 0s; -webkit-animation: homeFlextitle; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0s; animation: homeFlextitle; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 0s; } } @keyframes homeFlextitle { 0% { transform: rotate(90deg); top: 15%; } 50% { transform: rotate(0deg); top: 15%; } 100% { transform: rotate(90deg); top: 15%; } } .flex-about-home { opacity: 0; } @media screen and (min-width: 768px) { .flex-about-home { -moz-animation: flexAboutHome; -moz-animation-duration: 3s; -moz-animation-iteration-count: 1; -moz-animation-delay: 0s; -webkit-animation: flexAboutHome; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0s; animation: flexAboutHome; animation-duration: 3s; animation-iteration-count: 1; animation-delay: 0s; } } @keyframes flexAboutHome { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .about { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://repo.bfw.wiki/bfwrepo/image/5d65390e19eb6.png); background-size: cover; background-position: center center; background-attachment: fixed; } .contact-form { width: 100%; } input { width: 100%; } textarea { width: 100%; } .contact { background: linear-gradient.........完整代码请登录后点击上方下载按钮下载查看
网友评论0