纯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 按钮样式简单可扩展创建
Mar 18 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
css背景和边框标签实例详解
May 21 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实现WEB动态网页静态
2006/10/09 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python实现代码统计器
2019/09/19 Python
Tensorflow 实现释放内存
2020/02/03 Python
车间组长岗位职责
2013/12/20 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
申论倡议书范文
2014/05/13 职场文书
十周年庆典策划方案
2014/06/03 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
工作后的感想
2015/08/07 职场文书
详解Nginx 工作原理
2021/03/31 Servers
详解Python生成器和基于生成器的协程
2021/06/03 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
浅谈MySQL之select优化方案
2021/08/07 MySQL
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android