CSS实现全屏切换效果

如何通过CSS使div实现全屏效果

全屏要素

  • 全屏的元素及其父元素都要设置height:100%
  • 将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>

展示效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

appium+python自动化24-滑动方法封装(swipe)

一、swipe介绍 1.查看源码语法,起点和终点四个坐标参数,duration是滑动屏幕持续的时间,时间越短速度越快。默认为None可不填,一般设置500-1...

3924
来自专栏HT

基于HTML5快速搭建TP-LINK电信拓扑设备面板

  今天我们以真实的TP-LINK设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。   先来目睹下最终的实现效果:http://www.hight...

19410
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

1394
来自专栏欧阳大哥的轮子

CSS中的float定位技术在iOS上的实现

几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素的浮动定位展示。float 属性定义元素在哪个方向浮动。以往这个属性总应用于...

622
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

753
来自专栏姬小光

小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”(回复 007 或 7)的简单栗子,如果大家用心尝试的话,应该已经可以做出一些粗糙的页面了。

581
来自专栏程序员八阿哥

开心学前端(一):HTML、CSS入门(1)1.1 html概述及html文档基本结构1.2 html标签入门

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语...

591
来自专栏deepcc

jQuery阻止冒泡和HTML默认操作

3015
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

672
来自专栏欧科云

让你的网站文字“抖”起来

最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。

743

扫码关注云+社区