纯css+媒体查询实现网页导航特效

附上效果图：

代码如下，复制即可使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body {

            background: #801638;

        }

        body,

        body > * {

            margin: 0;

            padding: 0;

            font-family: 'Roboto', sans-serif;

            font-weight: normal;

        }

        * {

            transition: all .3s ease 0s;

        }

        /* Background colours */

        div + div article:nth-child(1) {

            background: #c22326;

        }

        div + div article:nth-child(2) {

            background: #f37338;

        }

        div + div article:nth-child(3) {

            background: #fdb632;

        }

        div + div article:nth-child(4) {

            background: #027878;

        }

        div + div article:nth-child(5),

        div + div {

            background: #801638;

        }

        /* Main layout */

        html,

        body,

        div + div {

            width: 100vw;

            height: 100vh;

        }

        div + div {

            list-style: none;

            position: relative;

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: stretch;

            overflow: hidden;

        }

        /* Articles */

        div + div article {

            flex: initial;

            width: 20%;

            height: 100%;

            text-align: center;

            color: #fff;

            text-decoration: none;

            vertical-align: bottom;

            box-sizing: border-box;

            padding: 2vh 1vw;

            position: relative;

        }

        /* Big Headings */

        body > div:first-child {

            position: fixed;

            bottom: 8vh;

            background: #fff;

            width: 100%;

            text-align: center;

            padding: .5rem;

            z-index: 2;

        }

        body > div:first-child h1,

        body > div:first-child h2 {

            margin: 0;

            padding: 0;

        }

        /* Hover interaction */

        div + div:hover article {

            flex: initial;

            width: 10%;

        }

        div + div article:hover {

            width: 60%;

        }

        article > div {

            opacity: 0;

            transition: opacity .2s ease 0;

        }

        div + div article:hover > div {

            opacity: 1;

            transition: opacity .3s ease .3s;

        }

        /* navigation */

        div + div article > h2 {

            bottom: 2vh;

            position: absolute;

            text-align: center;

            width: 100%;

            margin: 0;

            font-size: 3vh;

        }

        /* Article layouts */

        article div {

            text-align: left;

            width: 58vw;

        }

        article div p,

        article div div h2,

        article div h3 {

            margin: 0 0 1em 0;

        }

        article div p {

            width: 40vw;

        }

        @media (max-width: 900px) {

            div + div article {

                padding: 2vh 3vw;

            }

            div + div article > h2 {

                transform: rotate(90deg);

                bottom: 23vh;

                min-width: 12em;

                text-align: left;

                transform: rotate(-90deg);

                transform-origin: 0 0 0;

                opacity: 1;

            }

            div + div article:hover > h2 {

                opacity: 0;

            }

            article div p {

                width: 50vw;

            }

            article div {

                max-height: calc(72%);

                overflow-y: auto;

            }

        }

    </style>

</head>

<body>

    <div>

        <h1>我在这,谁敢动我。</h1>

        <h2>我是你们大哥的头</h2>

    </div>

    <div>

        <article>

            <h2>大哥的小弟一</h2>

            <div>

                <h3>大哥的小弟一</h3>

                <p>身高180</p>

                <p>体重120</p>

            </div>

         </article>

         <article>

         　　<h2>大哥的小弟二</h2>

            <div>

               <h3>大哥的小弟二</h3>

               <p>身高160</p>

               <p>体重100</p>

            </div>

          </article>

          <article>

             <h2>大哥的小弟三</h2>

             <div>

               <h3>大哥的小弟三</h3>

               <p>身高175</p>

               <p>体重180</p>

             </div>

          </article>

          <article>

             <h2>大哥的小弟四</h2>

             <div>

             　　<h3>大哥的小弟四</h3>

                 <p>身高180</p>

                 <p>体重110</p>

             </div>

          </article>

          <article>

             <h2>大哥的小弟五</h2>

             <div>

               <h3>大哥的小弟五</h3>

               <p>身高180</p>

               <p>体重150</p>

             </div>

          </article>

     </div>

  </body>
</html>

如有错误，欢迎联系我指正，非常感谢！！！

纯CSS + 媒体查询实现网页导航特效的更多相关文章

  1. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  2. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  3. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  4. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  5. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  8. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

随机推荐

  1. Spring Boot—19Cache

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. 润乾V4报表批量打印

     背景说明 在应用中,经常遇到,批量打印的需求,批量打印,顾名思义,就是点击一次打印按钮,能打印多张报表. 下面,我们来介绍一下怎么样实现批量打印的 应用举例: Jsp代码 <% //rep ...

  3. 数组转换list集合问题

    1问题的起因: 项目总要使用一个方法把数组转换成list集合,百度说有这个方法Arrays.asList可以实现 2结果报错 抛出java.lang.UnsupportedOperationExcep ...

  4. UML 运用于开发过程——总结

    UML -- 统一的图形语言 用例图:需求捕获,测试依据类图:静态系统结构对象图:对象之间的关联构件图:构件之间的关联部署图:构建的物理部署 以上几种图的作用:描述系统结构 顺序图:捕获时间顺序协作图 ...

  5. 使用jqGrid过程中出现的问题

    在使用jqGrid过程中,需要后台查询数据添加到表格中,在js中循环调用addRowData方法时出现浏览器崩溃现象. 原因:jqGrid的addRowData方法中做了一系列的处理,在后台返回数据量 ...

  6. Lambda表达式学习记录

    Lambda表达式可以简化C#编程的某些方面,用法非常灵活.因此也不容易掌握. 下边是我学Lambda表达式的一点记录. 1.Lambda表达式是与委托紧密联系的.只要有委托参数类型的地方,就可以使用 ...

  7. 数组（list）分组、分段

    对一个list进行分组,要求控制每组中的元素个数: 1.使用切片分组: lst = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1] #lst可为 ...

  8. wordpress利用rsync同步备份

    我搭建的wordpress服务器现在使用的系统是opensuse, 服务器上面已做脚本和计划任务将wordpress使用的数据库与web目录每天压缩备份放到 /data/backup目录下 opera ...

  9. windows 查看端口号，杀进程

    查看端口号: 开始--运行--cmd netstat –and 杀进程: windows任务管理器         查看--显示列-PID 相关知识: 一台机器的80端口被httpd (apache) ...

  10. 如何修改PPT中左下方状态栏的主题名称

    网上有很多很好的PPT,可惜一般作者都加了名字和主题,现在我们就来说说如何修改PPT中左下方状态栏的主题名称. 如下图所示,红色方框内就是别人设置的主题. 网上很多网友都说:点击"视图&qu ...