如何通过css实现全屏切换效果。

如何通过css实现全屏切换效果。

如何通过CSS使div实现全屏效果,主要分为图片横排展示全屏切换效果和图片竖排展示全屏切换效果,分享给大家,具体如下:

全屏要素

  1. 全屏的元素及其父元素都要设置height:100%
  2. 将html、body标签设置height:100%

(注:height:100%是跟随其父元素高度变化而变化的)

1.图片横排展示全屏切换效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   padding: 0;
   margin: 0;
  }
  html,body{
   height: 100%;
  }
  #container,.sections,.section{
   height: 100%;
  }
  #section0,
  #section1,
  #section2,
  #section3{
   background-color: #000;
   background-size: cover;
   /*让背景图片在容器中居中*/
   background-position: 50% 50%;
   text-align: center;
   color: white;
  }
  #section0{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");
  }
  #section1{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");
  }
  #section2{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");
  }
  #section3{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");
  }
  .left{
   float: left;
   width: 25%;
  }
 </style>
</head>
<body>
 <div id="container" style="width:400%">
  <div class="sections">
   <div class="section left" id="section0">
    <h3>this is the page</h3>
   </div>
   <div class="section left" id="section1">
    <h3>this is the page</h3>
   </div>
   <div class="section left" id="section2">
    <h3>this is the page</h3>
   </div>
   <div class="section left" id="section3">
    <h3>this is the page</h3>
   </div>
  </div>
 </div>
</body>
</html> 

2.图片竖排展示全屏切换效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   padding: 0;
   margin: 0;
  }
  html,body{
   height: 100%;
  }
  #container,.sections,.section{
   height: 100%;
  }
  #section0,
  #section1,
  #section2,
  #section3{
   background-color: #000;
   background-size: cover;
   /*让背景图片在容器中居中*/
   background-position: 50% 50%;
   text-align: center;
   color: white;
  }
  #section0{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big86000.jpg");
  }
  #section1{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big11000.jpg");
  }
  #section2{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big55000.jpg");
  }
  #section3{
   background-image: url("http://ossweb-img.qq.com/images/lol/web201310/skin/big45000.jpg");
  }
 </style>
</head>
<body>
 <div id="container">
  <div class="sections">
   <div class="section" id="section0">
    <h3>this is the page</h3>
   </div>
   <div class="section" id="section1">
    <h3>this is the page</h3>
   </div>
   <div class="section" id="section2">
    <h3>this is the page</h3>
   </div>
   <div class="section" id="section3">
    <h3>this is the page</h3>
   </div>
  </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。