html and css3 实现分屏设计-网页前端设计cid1086

作者code

Warning: Undefined property: stdClass::$maxbutton id="5" in /www/wwwroot/code.5g-o.com/wp-content/plugins/kama-clic-counter/class.KCCounter.php on line 733
 
    
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/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">&rarr;</a>
    <a href="#" class="back back-left" title="back to intro">&larr;</a>
  </div><!-- /splitlayout -->
</div><!-- /container -->

<script src="https://ajax.googleapis.com/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>

?在线演示

让链接同时具备两种打开方式
获取源码: SCREEN
下载数:50人次, 文件大小: 111.0 KB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,965 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

类似文章