纯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. Flutter：Slivers大家族，让滑动视图的组合变得很简单！

     今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...

  2. ios虚拟机安装（二）

    1)vmware快照功能 创建还原点:右键-->snapshot(对当前虚拟机系统备份) 2)虚拟机与外界系统通话 找到路径:/vmware/vmware workstation下的darwin ...

  3. Android MVP开发模式及Retrofit + RxJava封装

    代码已上传到Github,因为接口都是模拟无法进行测试,明白大概的逻辑就行了! 欢迎浏览我的博客--https://pushy.site 1. MVP模式 1.1 介绍 如果熟悉MVP模式架构的话,对 ...

  4. 扩展LV手记

    情景概览 系统:CentOS Linux release 7.4.1708 (Core) 磁盘情况: 目标:将sda3扩展到sda2下的centos-root虚拟盘上 操作步骤 1.建立新的PV # ...

  5. zabbix系列之八——安装后配置三Triggers

    1Triggers(触发器) 描述 详细 备注 术语描述 1)触发器是评估监控项采集的数据的逻辑表达式,代表了当前系统状态. 2)触发器可定义一个什么数据是可接受的阈值,因此,如果接收的数据超过了可接 ...

  6. PowerShell小技巧 算术表达式求值

    前几天要统计一个组虚拟机使用的硬盘容量,只希望得到一个大概的值,计算的值截图如下: 写成算术表达式的话大概是:60 * 3 + 80 * 2 + 90 * 3 + 120 * 6 + 140 * 2 ...

  7. Prometheus Node_exporter 之 Basic Net / Disk Info

    1. Network Traffic Basic 每个接口的基本网络信息 type: GraphUnit: bytesrecv {{device}} 各个网络接口的下载量 recv lo: 本地环回接 ...

  8. 从本机构建Linux应用程序VHD映像

    下图描述了总体的虚拟机映像的VHD生成,上传以及发布到 Azure 镜像市场的全过程: 具体步骤如下: 在本地计算机(Windows平台)上安装Hyper-V,并安装您所需要的虚拟机操作系统 在此操作 ...

  9. SQL Server FOR XML PATH 和 STUFF函数的用法

    FOR XML PATH ,其实它就是将查询结果集以XML形式展现,将多行的结果,展示在同一行. 下面我们来写一个例子: 假设我们有个工作流程表: CREATE TABLE [dbo].[Workfl ...

  10. [翻译] SSKeychain

    SSKeychain https://github.com/soffes/sskeychain SSKeychain is a simple wrapper for accessing account ...