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

<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. web前端学习常用网址记录

    jetbrains下载各种软件和试用 www.jetbrains.com www.jetbrains.com/idea php服务器下载 php文档查询 php.net webAPI网站(各种教程文档 ...

  2. jquery源码学习（二）——jquery中的变量

    jquery在 21-93 行提供了变量 var // A central reference to the root jQuery(document) rootjQuery, // The defe ...

  3. LintCode刷题笔记-- BackpackII

    标记: 动态规划 问题描述: Given n items with size Ai, an integer m denotes the size of a backpack. How full you ...

  4. Android 程序员不得不收藏的个人博客(持续更新...)

    本文已收录我的 Github ,持续更新中 ,欢迎点赞 ! 每周打开一次收藏夹里的个人博客,已经成为了我的人生一大乐趣. 相比各大博客平台,我一直更加偏爱个人博客.在每个人自己的这一亩三分地里,你能看 ...

  5. 修改Eclipse自动换行长度

    使用Ctrl+Shift+F自动格式化代码的时候,有时候折行太多反而让代码看起来更乱,不容易阅读. 解决办法: Window-->Preferences-->Java-->Code ...

  6. 设置程序PrivatePath，配置引用程序集的路径（分离exe和dll）

    原文:设置程序PrivatePath,配置引用程序集的路径(分离exe和dll) 有时候我们想让程序的exe文件和dll文件分开在不同目录,这时候可以有3种方法 1.在app.config中配置 &l ...

  7. 生成mysql数据字典

    data_dictionary.php <?php /** * 生成mysql数据字典 */ header("Content-type: text/html; charset=utf- ...

  8. ie8或9下ajax跨域问题

    ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...

  9. javaweb学习总结(一) - - JSP取得绝对路径

    在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法如下: 例如: 1 <!--使用绝对路径的方式引入 ...

  10. poj 2431 【优先队列】

    poj 2431 Description A group of cows grabbed a truck and ventured on an expedition deep into the jun ...