自适应恐龙引导页面
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Anton|Overpass+Mono:600&display=swap"); /* Variables */ /* Mixins and functions */ /* Reset */ * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, sans-serif; } img { max-width: 100%; display: block; width: 100%; height: auto; } ul { list-style: none; margin: 0; padding: 0; } /* Typography */ body { font-family: "Overpass Mono", monospace; } h1, h2, h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; } h1 { font-size: 3rem; } @media (min-width: 40em) { h1 { font-size: 5rem; } } @media (min-width: 60em) { h1 { font-size: 6.875rem; } } h2 { font-size: 1.875rem; letter-spacing: 0.03em; margin: 0; } @media (min-width: 40em) { h2 { font-size: 3.75rem; } } @media (min-width: 60em) { h2 { font-size: 5.5rem; } } a { color: inherit; } /* Header */ .page-header { position: fixed; z-index: 2; width: 100%; } /* Scroll behaviour */ @media (min-height: 30em) { main { scroll-snap-type: y mandatory; height: 100vh; overflow-y: scroll; } } /* Nav */ .nav__list { display: flex; height: 5rem; align-items: center; justify-content: flex-end; padding: 0.625rem 1.25rem; } .nav__item a { color: white; display: block; text-decoration: none; padding: 0.75rem 1.25rem; } .nav__item a:hover, .nav__item a:focus { text-decoration: underline; } .nav__item--cta { margin-left: 1.25rem; } .nav__item--cta a { font-family: "Anton", sans-serif; font-size: 1.25rem; text-transform: uppercase; line-height: 1; color: black; background: #ffa700; border-radius: 0.375rem; min-width: 11.25rem; text-align: center; } .nav__item--cta a:hover, .nav__item--cta a:focus { text-decoration: none; background-color: #b37500; } /* Sections */ .section { color: white; position: relative; scroll-snap-align: center; display: flex; flex-direction: column; min-height: 100vh; } @media (min-height: 30em) { .section { height: 100vh; } } .section a { text-decoration: underline; color: white; } .section a:hover, .section a:focus { opacity: 0.7; } .section__header { display: none; position: sticky; top: 0; left: 0; padding: 1.25rem; color: #6b6a67; height: 5rem; flex: 0 0 auto; z-index: 2; align-items: center; width: 300px; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); background-color: black; } @media (min-width: 60em) { .section__header { display: flex; } } .section__title { margin: 0; font-size: 1.375rem; letter-spacing: 0.03rem; } .section__content { --pad: 1.25rem; padding: var(--pad); flex-grow: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; z-index: 1; } @media (min-width: 60em) { .section__content { --pad: 2.5rem; display: grid; grid-template-columns: 4fr 3fr 1fr 4fr 2fr 2fr 4fr 1fr 3fr 4fr; grid-template-rows: minmax(0, 1fr) repeat(6, minmax(2.5rem, auto)) minmax(0, 1fr); gap: 1.25rem; } } @media (min-height: 30em) { .section__content > * { opacity: 0; transform: translate3d(0, 4rem, 0); transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay); } } .is-visible .section__content > * { opacity: 1; transform: translate3d(0, 1rem, 0); } .is-visible .section__img { opacity: 0.75; } .section__main-title { width: 100%; text-align: center; } @media (min-width: 60em) { .section__main-title { text-align: left; } } .section__main-title--left { grid-column: 2 / -2; grid-row: 4 / 6; } .section__main-title--right { grid-column: 2 / -2; grid-row: 4 / 6; } @media (min-width: 60em) { .section__main-title--right { text-align: right; } } .section__img { max-width: 18.75rem; margin-bottom: 1.875rem; grid-column: 4 / -1; grid-row: 1 / -1; } @media (min-width: 60em) { .section__img { margin-bottom: 0; max-width: none; } } .section__img--left { grid-column: 1 / -4; } .section__intro { text-align: center; max-width: 50ch; } @media (min-width: 60em) { .section__intro { text-align: left; } } /* Hero */ .hero { max-height: 50rem; position: relative; color: #fff; background-color: #364b3b; overflow: hidden; } .hero__img { width: 100%; height: 100%; object-fit: cover; } .hero__content { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 1.25rem; } .hero__bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .hero__bg::after { content: ""; position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; background: radial-gradient(rgba(0, 0, 0, 0.6) 70%, black); opacity: 1; transition: opacity 4000ms; } .is-visible .hero__bg { filter: grayscale(0); } .is-visible .hero__bg::after { opacity: 0.6; } .hero__tex.........完整代码请登录后点击上方下载按钮下载查看
网友评论0