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

<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. Liferay 7.1发布啦

    下载地址: https://cdn.lfrs.sl/releases.liferay.com/portal/7.1.0-m1/liferay-ce-portal-tomcat-7.1-m1-20180 ...

  2. cf round480D Perfect Groups

    题意:给一个序列,对于每一个连续的区间,区间内的数至少分成几个组,使得每个组内的数任意2个相乘是一个完全平方数(包括0). 输出每个组数的个数. $n \leq 5000 , |a_i| \leq 1 ...

  3. CSS hack处理

    css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差. 各浏览器CSS解析: 1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safar ...

  4. DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS

    原文:DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  5. SQL优化神器 - Tosska SQL Tuning Expert Pro for Oracle

    SQL Tuning Expert Pro for Oracle 是Tosska 公司推出的划时代SQL优化工具.它可以帮助SQL开发人员和DBA: 找到最快的等价SQL: 调整执行计划: 管理SQL ...

  6. 自学FPGA笔记之 “有限状态机”

    “有限状态机”,一份好的代码必需掌握的技能. 首先状态机需要分清楚一共有多少种状态,其次画出状态图,状态图根据需求来画,尽可能的细分画到每一个状态,如有需要用到状态机一定要画出状态图,一定要画出状态图 ...

  7. Android开源实战：使用MVP+Retrofit开发一款文字阅读APP

    文字控 使用MVP+Retrofit开发的一款文艺APP,它是一个非常优美的文字阅读应用,界面基本上符合material design设计规范. 在该项目中,我采用的是MVP架构,该架构目前在Andr ...

  8. px和rem换算

    bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 假设,我们设置html的字体大小的值为html{font-si ...

  9. jreble for eclipse配置

    1 下载安装jrebel for eclipse  安装方法不再赘述.常规方式Install via Eclipse Marketplace->earch for JRebel 2 安装之后替换 ...

  10. Leetcode840.Magic Squares In Grid矩阵中的幻方

    3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等. 给定一个由整数组成的 N × N 矩阵,其中有多少个 3 × 3 的 & ...