CSS全屏切换效果的实现方法

网址简介:未填写

更新时间:9个月前

访问次数:87

详细介绍

今天小编将为大家介绍CSS全屏切换效果的实现方法,这个方法对于大家学习CSS有着一定的帮助,现在就为大家分享详细内容,希望可以给大家做个参考。

全屏要素

  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>  

CSS全屏切换效果的实现方法是什么?其实CSS全屏切换效果主要分为图片横排展示和图片竖排展示,看完后你是否学会了呢?

请发表您的评论