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

<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. HDU3887 Counting Offspring [2017年6月计划 树上问题03]

    Counting Offspring Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  2. 【P1203】 【USACO1.1】坏掉的项链Broken Necklace

    P1203 [USACO1.1]坏掉的项链Broken Necklace 题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 ...

  3. OpenLayers使用弹出窗口

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  4. 【JZOJ5081】【GDSOI2017第三轮模拟】Travel Plan 背包问题+双指针+树的dfs序

    题面 100 注意到ban的只会是一个子树,所以我们把原树转化为dfs序列. 然后题目就转化为,询问一段ban的区间,之后的背包问题. 比赛的时候,我想到这里,于是就开始想区间合并,于是搞了线段树合并 ...

  5. win下在虚拟机安装CentOS 7 Linux系统

    准备: CentOS 7下载地址(我下的是everthing版本):https://www.centos.org/download/ 一.首先下载安装虚拟机VMware 地址官网下载即可. 二.安装操 ...

  6. homeworkvue

    两个半圆,点一下转90°,两个颜色 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. springboot自定义错误页面（转）

    方法一:Spring Boot 将所有的错误默认映射到/error, 实现ErrorController @Controller @RequestMapping(value = "error ...

  8. 计算机网络3.2&3.3（第二节介质&第三节多路复用）

    有限的传播介质 双绞线 双绞线电缆 双绞线总结 2 同轴电缆 粗细电缆的传输距离 现在基本都用双绞线和光线 同轴电缆用于居民小区和家庭使用 3 光纤 光纤中以光信号的形式进行传播 正如我们现在看到这样 ...

  9. 跨域知识（二）——JSONP

    JSONP是服务器与客户端跨源通信的常用方法.最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小. 它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据, ...

  10. golang变量-数据类型一

    package main import "fmt" var t1 = 100 var t2 = 200 var t3 = 300 var ( u1 = 100 u2 = 200 u ...