原码笔记

原码笔记

纯CSS + 媒体查询实现网页导航效果

小诸哥 0

这篇文章主要介绍了纯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.          article div p {
  117.              width: 40vw;
  118.          }
  119.          @media (max-width: 900px) {
  120.              div + div article {
  121.                  padding: 2vh 3vw;
  122.              }
  123.              div + div article > h2 {
  124.                  transform: rotate(90deg);
  125.                  bottom: 23vh;
  126.                  min-width: 12em;
  127.                  text-align: left;
  128.                  transform: rotate(-90deg);
  129.                  transform-origin: 0 0 0;
  130.                  opacity: 1;
  131.              }
  132.              div + div article:hover > h2 {
  133.                  opacity: 0;
  134.              }
  135.              article div p {
  136.                  width: 50vw;
  137.              }
  138.              article div {
  139.                  max-height: calc(72%);
  140.                  overflow-y: auto;
  141.              }
  142.          }
  143.      </style>
  144. </head>
  145. <body>
  146.      <div>
  147.          <h1>我在这,谁敢动我。</h1>
  148.          <h2>我是你们大哥的头</h2>
  149.      </div>
  150.      <div>
  151.          <article>
  152.              <h2>大哥的小弟一</h2>
  153.              <div>
  154.                  <h3>大哥的小弟一</h3>
  155.                  <p>身高180</p>
  156.                  <p>体重120</p>
  157.              </div>
  158.              </article>
  159.              <article>
  160.              　　<h2>大哥的小弟二</h2>
  161.              <div>
  162.                  <h3>大哥的小弟二</h3>
  163.                  <p>身高160</p>
  164.                  <p>体重100</p>
  165.              </div>
  166.              </article>
  167.              <article>
  168.                  <h2>大哥的小弟三</h2>
  169.                  <div>
  170.                  <h3>大哥的小弟三</h3>
  171.                  <p>身高175</p>
  172.                  <p>体重180</p>
  173.                  </div>
  174.              </article>
  175.              <article>
  176.                  <h2>大哥的小弟四</h2>
  177.                  <div>
  178.                  　　<h3>大哥的小弟四</h3>
  179.                      <p>身高180</p>
  180.                      <p>体重110</p>
  181.                  </div>
  182.              </article>
  183.              <article>
  184.                  <h2>大哥的小弟五</h2>
  185.                  <div>
  186.                  <h3>大哥的小弟五</h3>
  187.                  <p>身高180</p>
  188.                  <p>体重150</p>
  189.                  </div>
  190.              </article>
  191.          </div>
  192.      </body>
  193. </html>

 

标签： CSS 查询 实现 网页 导航 效果

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇浅谈CSS中的百分比

下一篇CSS 样式书写规范(推荐)

相关文章