纯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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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动态生成JavaScript代码
2009/03/09 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
解析link_mysql的php版
2013/06/30 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
python中函数默认值使用注意点详解
2016/06/01 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python 远程开关机的方法
2020/11/18 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
Python常用断言函数实例汇总
2020/11/30 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
自荐信格式的六要素
2013/09/21 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
学校消防演习方案
2014/02/19 职场文书
家长建议怎么写
2014/05/15 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle