html and css3 实现分屏设计-网页前端设计 id1086
源码下载地址
在新演示地址
<!DOCTYPE html><html lang="en"><head><link href="/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet"><title>Split</title><style>/* Reset */*, *:after, *:before {box-sizing: border-box;margin: 0;padding: 0;}body, html {font-size: 100%; padding: 0; margin: 0;}body {font-family: 'Roboto Condensed', sans-serif;color: #fff;background: #333;}a {color: #ccc;text-decoration: none;}a:hover {color: #000;}/* /Reset */html, body, .container {position: relative;width: 100%;height: 100%;}body {overflow: hidden;}.splitlayout {position: relative;overflow-x: hidden;min-height: 100%;width: 100%;}/* Intro sides */.side {position: fixed;top: 0;z-index: 100;width: 50%;height: 100%;text-align: center;-webkit-backface-visibility: hidden;}.open-left .side,.open-right .side {cursor: default;}.overlay {position: absolute;top: 0;left: 0;z-index: 499;visibility: hidden;width: 100%;height: 100%;opacity: 0;}.side-left .overlay {background: rgba(0,0,0,0.7);}.side-right .overlay {background: rgba(0,0,0,0.3);}.side-left {left: 0;background: #f4c150;color: #fff;outline: 1px solid #47a3da; /* avoid gap */}.side-right {right: 0;background: #fff;color: #47a3da;outline: 1px solid #fff; /* avoid gap */}/* Intro content, profile image and name, back button */.intro-content {position: absolute;top: 50%;left: 50%;padding: 0 1em;width: 50%;cursor: pointer;-webkit-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%);}.profile {margin: 0 auto;width: 190px;height: 190px;border-radius: 50%;background: #47a3da;}.profile img {max-width: 100%;border-radius: 50%;}.intro-content h1 > span {display: block;white-space: nowrap;}.intro-content h1 > span:first-child {font-weight: bold;font-size: 1em;}.intro-content h1 > span:nth-child(2) {position: relative;margin-top: 0.5em;padding: 0.8em;text-transform: uppercase;letter-spacing: 1px;font-size: 0.8em;}.intro-content h1 > span:nth-child(2):before {position: absolute;top: 0;left: 25%;width: 50%;height: 2px;background: #fff;content: '';}.side-right .intro-content h1 > span:nth-child(2):before {background: #47a3da;}.back {position: fixed;top: 2.6em;z-index: 500;display: block;visibility: hidden;width: 50px;height: 50px;border-radius: 50%;color: #47a3da;text-align: center;font-size: 22px;line-height: 44px;opacity: 0;pointer-events: none;}.mobile-layout .back {position: absolute;}.back-left {left: 12.5%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}.back-right {right: 12.5%;-webkit-transform: translateX(50%);transform: translateX(50%);color: #fff;}.open-right .back-left,.open-left .back-right {visibility: visible;opacity: 1;-webkit-transition-delay: 0.3s;transition-delay: 0.3s;pointer-events: auto;}.back:hover {color: #ddd;}/* Pages */.page {position: relative;top: 0;overflow: auto;min-height: 100%;width: 75%;height: auto;font-size: 1.4em;-webkit-backface-visibility: hidden;}.page-right {left: 25%;outline: 5px solid #ecf0f1; background: #ecf0f1;color: #97a8b2;-webkit-transform: translateX(100%);transform: translateX(100%);}.splitlayout.open-right {background: #ecf0f1;}.page-left {left: 0;outline: 5px solid #34495e; background: #34495e;color: #fff;text-align: right;-webkit-transform: translateX(-100%);transform: translateX(-100%);}.splitlayout.open-left {background: #34495e;}/* Inner page content */.page-inner {padding: 2em;}.page-inner section {padding-bottom: 1em;}.page-inner h2 {margin: 0 0 1em 0;font-weight: bold;font-size: 1.6em;}.page-inner p {font-weight: 300;font-size: 1em;text-align: right;}/* All transitions */.side,.page {-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;}.overlay {-webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;transition: opacity 0.6s, visibility 0.1s 0.6s;}.intro-content {-webkit-transition: -webkit-transform 0.6s, top 0.6s;transition: transform 0.6s, top 0.6s;}.intro-content h1,.back {-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}/* Open and close */.reset-layout .page,.splitlayout.open-right .page-left,.splitlayout.open-left .page-right,.splitlayout.close-right .page-left,.splitlayout.close-left .page-right {position: absolute;overflow: hidden;height: 100%;}.splitlayout.open-right .page-right,.splitlayout.open-left .page-left {position: relative;overflow: auto;height: auto;}.open-right .side-left .overlay,.open-left .side-right .overlay {visibility: visible;opacity: 1;-webkit-transition: opacity 0.6s;transition: opacity 0.6s;}/* Right side open */.open-right .side-left {-webkit-transform: translateX(-60%);transform: translateX(-60%);}.open-right .side-right {z-index: 200;-webkit-transform: translateX(-150%);transform: translateX(-150%);}.close-right .side-right {z-index: 200;}.open-right .side-right .intro-content {-webkit-transform: translateY(-50%) translateX(0%) scale(0.6);transform: translateY(-50%) translateX(0%) scale(0.6);}.open-right .page-right {-webkit-transform: translateX(0%);transform: translateX(0%);}/* Left side open */.open-left .side-right {-webkit-transform: translateX(60%);transform: translateX(60%);}.open-left .side-left {z-index: 200;-webkit-transform: translateX(150%);transform: translateX(150%);}.close-left .side-left {z-index: 200;}.open-left .side-left .intro-content {-webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);transform: translateY(-50%) translateX(-100%) scale(0.6);}.open-left .codropsheader {opacity: 0;visibility: hidden;-webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;transition: opacity 0.3s, visibility 0.1s 0.3s;}.open-left .page-left {-webkit-transform: translateX(0%);transform: translateX(0%);}/* Media Queries */@media screen and (max-width: 83em) {.intro-content {font-size: 60%; }}@media screen and (max-width: 58em) {body {font-size: 90%; }}@media screen and (max-width: 49.4375em) {.open-right .side-right {-webkit-transform: translateX(-175%);transform: translateX(-175%);}.open-right .side-left {-webkit-transform: translateX(-100%);transform: translateX(-100%);}.open-left .side-right {-webkit-transform: translateX(100%);transform: translateX(100%);}.open-left .side-left {-webkit-transform: translateX(175%);transform: translateX(175%);}.page {width: 100%;}.page-right {left: 0;padding-left: 15%;}.page-left {padding-right: 15%;}.intro-content {width: 100%;}.open-right .side-right .intro-content {top: 100%;-webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);transform: translateY(-150px) translateX(-12.5%) scale(0.5);}.open-left .side-left .intro-content {top: 100%;-webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);transform: translateY(-150px) translateX(-87.5%) scale(0.5);}.open-right .intro-content h1,.open-left .intro-content h1 {opacity: 0;}.back-left {left: 6.25%;}.back-right {right: 6.25%;}}@media screen and (max-width: 42.5em) {body {font-size: 80%; }.intro-content {font-size: 50%; }}@media screen and (max-height: 41.125em) {.intro-content {-webkit-transform: translateY(-25%) translateX(-50%);transform: translateY(-25%) translateX(-50%);}}@media screen and (max-width: 39.375em) {.intro-content .profile {-webkit-transform: scale(0.5); transform: scale(0.5); }}@media screen and (max-width: 320px) {body {font-size: 70%; }}</style></head><body><div class="container"><div id="splitlayout" class="splitlayout"><div class="intro"><div class="side side-left"><div class="intro-content"><div class="profile"><img src="client-2.jpg" alt="profile1"></div><br><br><h1><span>RONALDO </span><span>WEB DESIGNER</span></h1></div><div class="overlay"></div></div><div class="side side-right"><div class="intro-content"><div class="profile"><img src="client-1.jpg" alt="profile2"></div><br><br><h1><span>JHONSON</span><span>WEB DEVELOPER</span></h1></div><div class="overlay"></div></div></div><!-- /intro --><div class="page page-right"><div class="page-inner"><section><h2>WEB DEVELOPMENT</h2><p>Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p></section></div><!-- /page-inner --></div><!-- /page-right --><div class="page page-left"><div class="page-inner"><section><h2>WEB DESIGN</h2><p>Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p><p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p></section></div><!-- /page-inner --></div><!-- /page-left --><a href="#" class="back back-right" title="back to intro">→</a><a href="#" class="back back-left" title="back to intro">←</a></div><!-- /splitlayout --></div><!-- /container --><script src="/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){$(".side-left .intro-content").click(function(){$(".splitlayout").addClass("open-left");$(".splitlayout").removeClass("close-right reset-layout");});$(".back-right").click(function(){$(".splitlayout").removeClass("open-left");$(".splitlayout").addClass("close-left reset-layout");});$(".side-right .intro-content").click(function(){$(".splitlayout").addClass("open-right");$(".splitlayout").removeClass("close-left reset-layout");});$(".back-left").click(function(){$(".splitlayout").removeClass("open-right");$(".splitlayout").addClass("close-right reset-layout");});});</script></body></html>
源码下载地址
在新演示地址
html and css3 实现分屏设计-网页前端设计 id1086
点赞 评论 转发就是对up的最大支持和鼓励， 非常谢谢!
如果觉得《html and css3 实现分屏设计-网页前端设计 id1086》对你有帮助，请点赞、收藏，并留下你的观点哦！
