此前写的那个太复杂了，来点简单的核心

<html>

<head>

    <title></title>

    <style type="text/css">

        * { margin: 0; padding: 0; border: none; } 

        .Bl {

            width: 600px;

            height: 540px;

            margin: 0 auto;

            position: relative;

            top: 50%;

            transform: translateY(-50%);

        }

        .Bl > input {

            width: 20%;

            height: 40px;

            position: absolute;

            cursor: pointer;

            opacity: 0;

        }

        .Bl input:nth-of-type(1){ left: 0%; }

        .Bl input:nth-of-type(2){ left: 20%; }

        .Bl input:nth-of-type(3){ left: 40%; }

        .Bl input:nth-of-type(4){ left: 60%; }

        .Bl input:nth-of-type(5){ left: 80%; }

        /*切换效果*/

        .Bl input:nth-of-type(1):checked ~ span:nth-of-type(1) { color: white; }  /* ~ 选择兄弟元素 */

        .Bl input:nth-of-type(2):checked ~ span:nth-of-type(2) { color: white; }

        .Bl input:nth-of-type(3):checked ~ span:nth-of-type(3) { color: white; }

        .Bl input:nth-of-type(4):checked ~ span:nth-of-type(4) { color: white; }

        .Bl input:nth-of-type(5):checked ~ span:nth-of-type(5) { color: white; }

        .Bl input:nth-of-type(1):checked ~ .pagebox > .pages {  }

        .Bl input:nth-of-type(2):checked ~ .pagebox > .pages { transform: translateY(-100%); }

        .Bl input:nth-of-type(3):checked ~ .pagebox > .pages { transform: translateY(-200%); }

        .Bl input:nth-of-type(4):checked ~ .pagebox > .pages { transform: translateY(-300%); }

        .Bl input:nth-of-type(5):checked ~ .pagebox > .pages { transform: translateY(-400%); }

        span {

            display: block;

            width: 20%;

            height: 40px;

            background-color: red;

            float: left;

            text-align: center;

            line-height: 40px;

            font-size: 20px;

        }

        .pagebox,.pages {

            width: 100%;

            height: 500px;

        }

        .pagebox {

            overflow: hidden;

        }

        .pages {

            transition: all 0.5s;

        }

        .page {

            width: 100%;

            height: 100%;

            text-align: center;

            font-family: "微软雅黑";

            font-size: 30px;

            line-height: 500px;

            color: white;

        }

        .page1 { background-color: pink; }

        .page2 { background-color: blue; }

        .page3 { background-color: red; }

        .page4 { background-color: green; }

        .page5 { background-color: black; }

    </style>

</head>

<body>

    <div class="Bl">

        <input type="radio" name="btn" checked ><span>1</span>

        <input type="radio" name="btn"  ><span>2</span>

        <input type="radio" name="btn"  ><span>3</span>

        <input type="radio" name="btn"  ><span>4</span>

        <input type="radio" name="btn"  ><span>5</span>

        <section class="pagebox">

            <div class="pages">

                <div class="page page1">This is page1</div>

                <div class="page page2">This is page2</div>

                <div class="page page3">This is page3</div>

                <div class="page page4">This is page4</div>

                <div class="page page5">This is page5</div>

            </div>

        </section>

    </div>

</body>

</html>

【CSS3】纯CSS3制作页面切换效果的更多相关文章

  1. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  2. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  3. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  4. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  5. html5各种页面切换效果和模态对话框

    页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...

  6. WP8 NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

  7. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

  8. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. LINUX配置文件介绍

    每个 Linux 程序都是一个可执行文件,它含有操作码列表,CPU 将执行这些操作码来完成特定的操作.例如,ls 命令是由 /bin/ls 文件提供的,该文件含有机器指令的列表,在屏幕上显示当前目录中 ...

  2. AutoDesk产品，Maya 2018 安装，Microsoft Visual C++ 2012 安装失败，结果 = -2147024546，安装Microsoft Visual C++ 2012 Redistributable 错误0x80070005 等等

    今日老弟装Maya 2018出现问题,我帮忙解决了一下问题,过程颇为曲折,记录一下,看能否帮到有类似困惑的朋友. 我和老弟的电脑牌子一样,就现在自己电脑上装了,竟然开始和他的错误是一样的!都是Micr ...

  3. windows中将网络共享文件夹映射为网络硬盘

    目的是: 实现局域网,不同电脑之间共享文件. 例如: 计划将A电脑 的文件夹C:\MM ,共享给局域网电脑 B. 局域网所有电脑都可访问: 1. 在A电脑中 共享文件夹..选择‘启用网络发现’   ‘ ...

  4. Linux下的权限管理

    Linux系统上对文件的权限有着严格的控制,用于如果相对某个文件执行某种操作,必须具有对应的权限方可执行成功. Linux下文件的权限类型一般包括读,写,执行.对应字母为 r.w.x. Linux下权 ...

  5. Codeforces Round #309 (Div. 2) A. Kyoya and Photobooks【*组合数学】

    A. Kyoya and Photobooks time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. ConcurrentModificationException解决办法

    package test.my.chap0302; import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...

  7. VC程序异常中断的原因

    自己编写的VC程序,编译调试通过,运行良好,然后关闭运行界面,就弹出一个“已经触发一个中断”的提示,然后断点就停在了下面这个中断处. _CRTIMP void _cdecl _CrtDbgBreak( ...

  8. Ajax--Ajax基于原生javascript：创建Ajax对象、链接服务器、发送请求、接受响应结果

    Ajax概述 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 同步请求: 请求是由浏览器发送 页面会刷新 异步请求: 请求是由浏览器的一 ...

  9. Spring_自动组件扫描和 基于注解配置bean

    自动组件扫描 启用Spring组件扫描功能. 使用@Component注释来表示这是类是一个自动扫描组件.  package com.tanlei.dao; import org.springfram ...

  10. $(window).scrollTop() == $(document).height() - $(window).height()（底端）

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...