纯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. 关于ie7下display：inline-block；不支持的解决方案

    关于ie7下display:inline-block:不支持的解决方案 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是 ...

  2. xcrun: error: invalid active developer path (/Applications/Xcode.app/Contents/Developer)解决办法

    背景 mac下卸载了xcode,使用git等命令时就提示错误.invalid active path(Applications/Xcode.app/Contents/Developer),这种情况可以 ...

  3. 自己搭建云盘 – 简单的PHP网盘程序

    自己搭建云盘 – 简单的PHP网盘程序 Veno File Manager 2.6.3 汉化版 相信大家都比较熟悉或使用过 Owncloud 网盘程序,Owncloud 虽强大,不过太过于臃肿,而 V ...

  4. Object toString方法

    1.System.out.println()里的参数会自动调用toString方法. package com.mydemo.controller; // 1.getClass().getName() ...

  5. 树莓派2 raspyberry Pi2 交叉编译app

    Pi 使用的是ARMV7架构的BCM2836, 下载交叉编译器 arm-linux-gnueabihf-gcc 即可. 本地环境: Ubuntu14 + x86_64 1. 下载编译器地址: 1). ...

  6. Visual Studio 下nuget命令的使用

    从Visual Studio 2012版本开始默认集成了Nuget扩展,在Visual Studio 2010或以下的版本需要单独安装,安装方法如下: 1. “工具”→“扩展和更新...”,弹出扩展管 ...

  7. RMAN恢复脚本案例

    $ crontab -l0 12,19 * * * $ORACLE_HOME/scripts/arcbkup.sh59 03 * * *  $ORACLE_HOME/scripts/dbbkup.sh ...

  8. PHP设计模式系列 - 单例

    单例模式 通过提供自身共享实例的访问,单例设计模式用于限制特定对象只能被创建一次. 使用场景 例如数据库实例,一般都会走单例模式. 单例模式可以减少类的实例化 代码:来源InitPHP框架,先检测类有 ...

  9. Hibernate入门步骤及概念

    1.什么是Hibernate Hibernate是一个开发源代码的对象关系映射框架,它对JDBC进行非常轻量级的对象封装,使得程序员可以随心所欲地使用对象编程思维来操纵数据库.Hibernate可以应 ...

  10. Angular 星级评分组件

    一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需 ...