纯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中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 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处理json时中文问题的解决方法
2011/04/12 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
destoon数据库表说明汇总
2014/07/15 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
python flask 多对多表查询功能
2017/06/25 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
软件工程师面试题
2012/06/25 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
职工代表大会主持词
2014/04/01 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
公司员工体检通知
2015/04/21 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
Golang 字符串的常见操作
2022/04/19 Golang