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

附上效果图：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body {
  8.             background: #801638;
  9.         }
  10.         body,
  11.         body > * {
  12.             margin: 0;
  13.             padding: 0;
  14.             font-family: 'Roboto', sans-serif;
  15.             font-weight: normal;
  16.         }
  17.         * {
  18.             transition: all .3s ease 0s;
  19.         }
  20.         /* Background colours */
  21.         div + div article:nth-child(1) {
  22.             background: #c22326;
  23.         }
  24.         div + div article:nth-child(2) {
  25.             background: #f37338;
  26.         }
  27.         div + div article:nth-child(3) {
  28.             background: #fdb632;
  29.         }
  30.         div + div article:nth-child(4) {
  31.             background: #027878;
  32.         }
  33.         div + div article:nth-child(5),
  34.         div + div {
  35.             background: #801638;
  36.         }
  37.         /* Main layout */
  38.         html,
  39.         body,
  40.         div + div {
  41.             width: 100vw;
  42.             height: 100vh;
  43.         }
  44.         div + div {
  45.             list-style: none;
  46.             position: relative;
  47.             display: flex;
  48.             flex-direction: row;
  49.             flex-wrap: nowrap;
  50.             align-items: stretch;
  51.             overflow: hidden;
  52.         }
  53.         /* Articles */
  54.         div + div article {
  55.             flex: initial;
  56.             width: 20%;
  57.             height: 100%;
  58.             text-align: center;
  59.             color: #fff;
  60.             text-decoration: none;
  61.             vertical-align: bottom;
  62.             box-sizing: border-box;
  63.             padding: 2vh 1vw;
  64.             position: relative;
  65.         }
  66.         /* Big Headings */
  67.         body > div:first-child {
  68.             position: fixed;
  69.             bottom: 8vh;
  70.             background: #fff;
  71.             width: 100%;
  72.             text-align: center;
  73.             padding: .5rem;
  74.             z-index: 2;
  75.         }
  76.         body > div:first-child h1,
  77.         body > div:first-child h2 {
  78.             margin: 0;
  79.             padding: 0;
  80.         }
  81.         /* Hover interaction */
  82.         div + div:hover article {
  83.             flex: initial;
  84.             width: 10%;
  85.         }
  86.         div + div article:hover {
  87.             width: 60%;
  88.         }
  89.         article > div {
  90.             opacity: 0;
  91.             transition: opacity .2s ease 0;
  92.         }
  93.         div + div article:hover > div {
  94.             opacity: 1;
  95.             transition: opacity .3s ease .3s;
  96.         }
  97.         /* navigation */
  98.         div + div article > h2 {
  99.             bottom: 2vh;
  100.             position: absolute;
  101.             text-align: center;
  102.             width: 100%;
  103.             margin: 0;
  104.             font-size: 3vh;
  105.         }
  106.         /* Article layouts */
  107.         article div {
  108.             text-align: left;
  109.             width: 58vw;
  110.         }
  111.         article div p,
  112.         article div div h2,
  113.         article div h3 {
  114.             margin: 0 0 1em 0;
  115.         }
  116.  
  117.         article div p {
  118.             width: 40vw;
  119.         }
  120.         @media (max-width: 900px) {
  121.             div + div article {
  122.                 padding: 2vh 3vw;
  123.             }
  124.             div + div article > h2 {
  125.                 transform: rotate(90deg);
  126.                 bottom: 23vh;
  127.                 min-width: 12em;
  128.                 text-align: left;
  129.                 transform: rotate(-90deg);
  130.                 transform-origin: 0 0 0;
  131.                 opacity: 1;
  132.             }
  133.             div + div article:hover > h2 {
  134.                 opacity: 0;
  135.             }
  136.             article div p {
  137.                 width: 50vw;
  138.             }
  139.             article div {
  140.                 max-height: calc(72%);
  141.                 overflow-y: auto;
  142.             }
  143.         }
  144.     </style>
  145. </head>
  146. <body>
  147.     <div>
  148.         <h1>我在这,谁敢动我。</h1>
  149.         <h2>我是你们大哥的头</h2>
  150.     </div>
  151.     <div>
  152.         <article>
  153.             <h2>大哥的小弟一</h2>
  154.             <div>
  155.                 <h3>大哥的小弟一</h3>
  156.                 <p>身高180</p>
  157.                 <p>体重120</p>
  158.             </div>
  159.          </article>
  160.          <article>
  161.          　　<h2>大哥的小弟二</h2>
  162.             <div>
  163.                <h3>大哥的小弟二</h3>
  164.                <p>身高160</p>
  165.                <p>体重100</p>
  166.             </div>
  167.           </article>
  168.           <article>
  169.              <h2>大哥的小弟三</h2>
  170.              <div>
  171.                <h3>大哥的小弟三</h3>
  172.                <p>身高175</p>
  173.                <p>体重180</p>
  174.              </div>
  175.           </article>
  176.           <article>
  177.              <h2>大哥的小弟四</h2>
  178.              <div>
  179.              　　<h3>大哥的小弟四</h3>
  180.                  <p>身高180</p>
  181.                  <p>体重110</p>
  182.              </div>
  183.           </article>
  184.           <article>
  185.              <h2>大哥的小弟五</h2>
  186.              <div>
  187.                <h3>大哥的小弟五</h3>
  188.                <p>身高180</p>
  189.                <p>体重150</p>
  190.              </div>
  191.           </article>
  192.      </div>
  193.   </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. 用jquery实现带左右按键的轮播图

    成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...

  2. Ubuntu pydot failed to call GraphViz.Please install GraphViz 解决方法

    如果遇到: OSError: `pydot` failed to call GraphViz.Please install GraphViz (https://www.graphviz.org/) a ...

  3. Struts2中 Path （getContextPath与basePath）

    struts2中的路径问题是根据action的路径而不是jsp路径来确定,所以尽量不要使用相对路径. 虽然可以用redirect方式解决,但redirect方式并非必要.解决办法非常简单,统一使用绝对 ...

  4. idapython 开发

    调试方法 使用 pydevd 然后在需要调试处加入调试代码 GetOperandValue 作用 参数1: ea 虚拟地址 参数2: 操作数号 返回指令的操作数的被解析过的值 文档 def GetOp ...

  5. iPhone越狱cydia源大全

    越狱后如何添加cydia源及cydia源大全,希望对大家能有所帮助! 工具/原料 cydia 步骤/方法 越狱后添加cydia源 进入Cydia管理中找到软件源,先添加源. 进入“软件源”之后点击右上 ...

  6. CentOS6.5安装vncserver实现图形化访问

    一. 安装gnome图形化桌面 #yum groupinstall -y "X Window System" #yum groupinstall -y "Desktop& ...

  7. spring boot(16)-mail发邮件

    上一篇讲了如何处理异常,并且异常最终会写入日志.但是日志是写在服务器上的,我们无法及时知道.如果能够将异常发送到邮箱,我们可以在第一时间发现这个异常.当然,除此以外,还可以用来给用户发验证码以及各种离 ...

  8. Oracle EBS PO退货失败

    无法读取例程 &ROUTINE 中配置文件选项 INV_DEBUG_TRACE 的值. 系统-配置文件-地点层 INC%调试%踪 是 select *  from po_interface_e ...

  9. RHEL7系统管理之资源管理

    1. CGroup(控制群组).slice(切片).scop.service 控制群组(control group)是linux kernel的一项功能, 该功能允许linux对RHEL7中syste ...

  10. 解析苹果的官方例子LazyTableImages实现图片懒加载原理

    解析苹果的官方例子LazyTableImages实现图片懒加载原理 首先在官网下载源码: https://developer.apple.com/library/ios/navigation/#sec ...