纯CSS3制作页面切换效果的实例代码


Posted in HTML / CSS onMay 30, 2019

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

纯CSS3制作页面切换效果的实例代码

<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制作页面切换效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
CSS3 分类菜单效果
May 27 #HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
You might like
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php基础教程
2015/08/26 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
Augularjs-起步详解
2016/07/08 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
安装Python的教程-Windows
2017/07/22 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python 变量的创建过程详解
2019/09/02 Python
利用python画出AUC曲线的实例
2020/02/28 Python
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
售后服务承诺书范文
2014/03/26 职场文书
捐助感谢信
2015/01/22 职场文书
事业单位岗位说明书
2015/10/08 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
APP界面设计技巧和注意事项
2022/04/29 杂记
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL