纯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 给背景设置渐变色的方法
Sep 12 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 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
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP curl使用实例
2015/07/02 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
关于VPN
2012/06/10 面试题
总经理助理的八要求
2013/11/12 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
保险内勤岗位职责
2015/04/13 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python