页面倾斜布局效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; :root { --width: 100vw; --angle: -11deg; /*----------------- Magic Number Alert: the 0.09719 is calculated by this formula: tan(11°) / 2 11° is the current skewY value. ------------------*/ --magic-number: 0.09719; --skew-padding: calc(var(--width) * var(--magic-number)); } @media (min-width: 42em) { :root { --width: 42rem; } } .diagonal-box { position: relative; padding: var(--skew-padding) 0; margin-top: -1px; } .diagonal-box:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: skewy(var(--angle)); transform-origin: 50% 0; outline: 1px solid transparent; backface-visibility: hidden; } .bg-one:before { background-image: linear-gradient(45deg, #654ea3, #eaafc8); } .bg-two:before { background-image: linear-gradient(-135deg, #ff0084, #33001b); } .bg-three:before { background-image: linear-gradient(-135deg, #007, #003); } .content { max-width: var(--width); margin: 0 auto; padding: 1.5em; position: relative; /* ----------- enable the border to see, that the content perfectly fits into the section withou bleeding into the adjecting areas: ------------ */ } /* -------------------- Presentational Styles -------------------- */ *, *:before, *:after { box-sizing: border-box; } html { font-size: 100%; transition: font-size 0.2s linear; } @media (min-width: 70em) { html { font-size: 125%; } } body { background: #003; padding-top: 8em; color: #fff; font-family: 'Raleway', sans-serif; } h1 { text-align: center; margin: 0 auto 1em; padding: 0 1em; max-width: 42rem; line-height: 1.2; transform: skewY(var(--angle)); font-size: 3em; text-transform: uppercase; font-weight: 900; } h2 { font-size: 2.5em; margin: 0 0 0.5em; font-weight: 900; } .intro { font-size: 1.25em; transform: skewY(var(--angle)); margin: 0em auto 0em; text-align: center; background: #fff; color: #003; font-weight: 900; padding: 0.5em; text-transform: uppercase; } .intro a { background-image: linear-gradient(transparent 90%, 0, #003 100%); background-image: none; border-bottom: 4px solid; transition: none; } .intro a:hover { border-color: #a06; opacity: 1; } p { font-size: 1.25em; margin: 0; line-height: 1.5; } p + p, svg + p { margin-top: 1em; } p code { background: #0033; padding: 0.125em 0.375em; border-radius: 0.125em; } @media (min-width: 35em) { p code { white-space: nowrap; } } p a { color: inherit; text-decoration: none; background-image: linear-gradient(transparent 90%, 0, #fffa 100%); padding: 0.125em 0; transition: opacity 0.3s ease-out; } p a:hover { text-decoration: none; opacity: 0.8; } .columns { display: flex; margin: 2em -1em; } .figure { display: block; width: 100%; margin: 0 1em; } .figure svg { display: block; width: 100%; } .figure .object { transform-origin: 140px 140px; } .figure .object--rotate { animation: rotate 3s ease-in-out alternate infinite; } .figure .object--skew { animation: skew 3s ease-in-out alternate infinite; } .figure .object--skew-pause { animation: skew-pause 6s ease-in-out infinite; } .figure .object--skew-pause-alt { animation: skew-pause-alt 6s ease-in-out infinite; } .figure figcaption { margin-top: 0.5em; line-height: 1.5; font-weight: 700; opacity: 0.9; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(-11deg); } 100% { transform: rotate(-11deg) scaleX(1.2); } } @keyframes skew { to { transform: skewY(-11deg); } } @keyframes skew-pause { 0%, 70%, 100% { transform: skewY(0deg); } 20%, 50% { transform: skewY(-11deg); } } @keyframes skew-pause-alt { 0%, 40%, 100% { transform: skewY(0deg); } 20%, 30% { transform: skewY(-11deg); } } .formula { font-family: monospace; font-size: 1.5em; display: block; margin: 1em auto; text-align: center; } @media (min-width: 26em) { .formula { font-size: 2em; } } .boxes { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3%; margin: 2em 0; --translation: 0; } .boxes .box { width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #fff; background: #fff3; transform: translateY(var(--translation)); animation: translate 3s ease-in-out infinite; } .boxes .box:nth-child(1) { --translation: calc(var(--skew-padding) * 1.5); } .boxes .box:nth-child(2) { --translation: calc(var(--skew-padding) * 1); } .boxes .box:nth-child(3) { --translation: calc(var(--skew-padding) * 0.5); } .boxes .box:nth-child(4) { --translation: calc(var(--skew-padding) * 0); } @keyframes translate { 0%, 20%, 100% { transform: translateY(0); } 50%, 70% { transform: translateY(var(--translation)); } } /* --------------------------------- Interactive Controls --------------------------------- */ .controls { background: #FFF3; z-index: 5; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-radius: 0 0 0.5em 0.5em; max-width: 90%; } .controls__headline { color: #fff; margin: 0.75em 1.125em 0.625em; font-size: 1em; text-align: center; font-weight: 400; } .angle-control { padding: 0.75em 0.625em 0.625em; margin: 0 0.5em; font-size: 1em; border-top: 1px solid #fff3; display: flex; } .angle-control > * { vertical-align: middle; margin: 0 0.5em; } .angle-control span { display: inline-block; min-width: 6ch; } .angle-control input { width: 8em; flex-shrink: 1; } .result { text-align: right; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="controls"> <h2 class="controls__headline"> Playground: </h2> <div class="angle-control"> <input type="range" id="angle-control" min="-60" max="60" step="1" value="-11"> <span id="angle-result" class="result">-11 deg</span> </div> </div> <div class="diagonal-box"> <div class="content"> <h1>Tips for Pure CSS Diagonal Layouts</h1> <p class="intro"> Below you will find a few tips for creating diagonal layouts. If this is all too fast for you, check out this <a href="https://9elements.com/blog" target="_blank">step-by-step tutorial</a>. </p> </div> </div> <div class="diagonal-box bg-one"> <div class="content"> <h2>1. Skew to the rescue.</h2> <p> When you <a href="#">rotate</a> a 100%-width box, you get some ugly corners and need to make the whole box wider than 100%. The problem here is that you maybe don't know the height of the element, and then you also don't know how much wider than 100% it has to be. </p> <p> So instead of <code>transform: rotate(-11deg)</code> use <code>transform: skewY(-11deg)</code> and the transformed section stays within it's horizontal boundaries. </p> <div class="columns"> <figure class="figure"> <svg viewBox="0 0 280 280"> <rect fill="none" x="1" y="1" width="278" height="278" stroke="#FFF" stroke-width="2" /> <rect class="object object--rotate" width="2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0