纯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. asp.net web api 2 host in a windows service推荐阅读

    最简单的例子(官方)在控制台app里面运行: http://www.asp.net/web-api/overview/hosting-aspnet-web-api/use-owin-to-self-h ...

  2. 3.HTML颜色

    一,HTML 颜色采用的是 RGB 颜色,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色. <p st ...

  3. 无锁HashMap的原理与实现

    转载自: http://coolshell.cn/articles/9703.html 在<疫苗:Java HashMap的死循环>中,我们看到,java.util.HashMap并不能直 ...

  4. 使用 Azure CLI 管理 Azure 磁盘

    Azure 虚拟机使用磁盘来存储 VM 操作系统.应用程序和数据. 创建 VM 时,请务必选择适用于所需工作负荷的磁盘大小和配置. 本教程介绍如何部署和管理 VM 磁盘. 学习内容: OS 磁盘和临时 ...

  5. Oracle EBS 跳跳转标准销售订单程序转标准销售订单程序

    -- 打开PO PROCEDURE Btn_Open_Po IS BEGIN Fnd_Function.Execute(Function_Name => 'PO_POXPOEPO', Open_ ...

  6. Intel Nehalem微架构Calpella平台机型Windows XP系统下如何开启AHCI硬盘工作模式（XP系统下如何加载AHCI驱动）

    问题描述用户来电表示使用IDE模式安装XP系统后开启AHCI模式会出现开机蓝屏重启的问题,咨询如何在XP下加载AHCI驱动,以便开启BIOS中AHCI选项来发挥硬盘的最佳性能   问题分析 Windo ...

  7. AD用户登录验证，遍历OU（LDAP）

    先安装python-ldap模块 1.验证AD用户登录是否成功 import sqlite3,ldap domainname='cmr\\' username='zhangsan' ldapuser ...

  8. hibernate设置了not-null 为什么无效？

    因为设错地方了! 错误--写在了property标签里 <property name="password" type="string" length=&q ...

  9. Windows程序设计（Charles Petzold）HELLOWIN程序实现

    /*-------------------------------------------------------------- HELLOWIN.C--DisPlays "Hello, W ...

  10. 原生JavaScript可以干那些事情

    1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...