纯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. angular2 如何使用websocket

    1.npm下载: npm install angular2-websocket 2.需要在哪个组件使用就在那里引入: import {$WebSocket} from 'angular2-websoc ...

  2. ArcGIS10+：ArcGIS version not specified. You must call RuntimeManager.Bind before creating any ArcGIS

    ArcGIS10+版本,使用VS创建一个简单的AE应用程序,然后拖放一个toolbar.LicenseControl以及MapControl控件. 接着编译应用程序,编译成功. 然后单击F5运行程序, ...

  3. 根据自定义区域裁剪ArcGIS切片地图服务

    切片地图服务是访问地图最快捷的服务方式.假如要根据地理区域对切图进行访问控制,往往只能针对不同地理区域制作相应的地图,并发布为切片地图服务.而一般在切图的时候又是按全区域实施的,所以给切片管理者造成不 ...

  4. ComboBox Style

    <SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" /> < ...

  5. exception tomcat startup.bat 闪退

    解决方案: startup.bat,右击->编辑,在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.7 (java jdk目录) SET TOMCAT_HOME=E: ...

  6. web 应用响应乱码问题

    非西欧语系乱码原因 在没有设置任何内容类型或编码之前,HttpServletResponse使用的字符编码默认是ISO-8859-1.也就是说,如果直接输出中文,在浏览器上就会看到乱码. 有两种方式可 ...

  7. git repo代码部署策略及工具

    一般在项目或者产品开发流程中,先是开发人员在本地做好开发及测试,其中可能包含很多用于测试用的目录以及源代码文件,在部署前往往会有一个build过程.web项目最终build产生出优化生产环境下减少ht ...

  8. 将mongodb设置为windows服务

    [转载] [转载]安装mongodb以及设置为windows服务 详细步骤 将mongodb设置成windows服务,这样就不用使用命令启动了,设置方法如下: 1.在data文件夹下新建一个log文件 ...

  9. 设计多选一按钮ChooseOnlyButton

    设计多选一按钮ChooseOnlyButton 效果: 源码: ChooseOnlyButton.h 与 ChooseOnlyButton.m // // ChooseOnlyButton.h // ...

  10. 一键安装lnmp1.5

    系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin/Aliyun/Amazon/Mint Linux发行版 需要5GB以上硬盘剩余空间,MyS ...