主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

附上效果图，如果大家感觉不错，请参考实现代码

 代码如下，复制即可使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background: #801638;
        }
        body,
        body >  {
            marg: 0;
            paddg: 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;
        }
        / Ma 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: itial;
            width: 20%;
            height: 100%;
            text-align: center;
            color: #fff;
            text-decoration: none;
            vertical-align: bottom;
            box-sizg: border-box;
            paddg: 2vh 1vw;
            position: relative;
        }
        / Big Headgs /
        body > div:first-child {
            position: fixed;
            bottom: 8vh;
            background: #fff;
            width: 100%;
            text-align: center;
            paddg: .5rem;
            z-dex: 2;
        }
        body > div:first-child h1,
        body > div:first-child h2 {
            marg: 0;
            paddg: 0;
        }
        / Hover teraction /
        div + div:hover article {
            flex: itial;
            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%;
            marg: 0;
            font-size: 3vh;
        }
        / Article layouts /
        article div {
            text-align: left;
            width: 58vw;
        }
        article div p,
        article div div h2,
        article div h3 {
            marg: 0 0 1em 0;
        }
        article div p {
            width: 40vw;
        }
        @media (max-width: 900px) {
            div + div article {
                paddg: 2vh 3vw;
            }
            div + div article > h2 {
                transform: rotate(90deg);
                bottom: 23vh;
                m-width: 12em;
                text-align: left;
                transform: rotate(-90deg);
                transform-orig: 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>

 

上一篇：CSS3截取字符串实例代码【推荐】 下一篇：css实现各种0.5px的线(小结)

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by