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

番茄西红柿发布于2019-04-23 13:46 / 2421人阅读

摘要：纯媒体查询实现网页导航特效附上效果图代码如下，复制即可使用我在这谁敢动我。

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

附上效果图：

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>身高180p>
                <p>体重120p>
            div>
         article>
         <article>
         　　<h2>大哥的小弟二h2>
            <div>
               <h3>大哥的小弟二h3>
               <p>身高160p>
               <p>体重100p>
            div>
          article>
          <article>
             <h2>大哥的小弟三h2>
             <div>
               <h3>大哥的小弟三h3>
               <p>身高175p>
               <p>体重180p>
             div>
          article>
          <article>
             <h2>大哥的小弟四h2>
             <div>
             　　<h3>大哥的小弟四h3>
                 <p>身高180p>
                 <p>体重110p>
             div>
          article>
          <article>
             <h2>大哥的小弟五h2>
             <div>
               <h3>大哥的小弟五h3>
               <p>身高180p>
               <p>体重150p>
             div>
          article>
     div>
  body>
html>

如有错误，欢迎联系我指正，非常感谢！！！

服务器托管云服务器纯CSS jquery导航特效 css特效 css导航条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2306.html

关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

amc 2019-08-29 16:10 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

Tony_Zby 2019-07-01 10:23 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

zeyu 2019-08-02 11:03 评论0 收藏0
前端每日实战 2018 年 5 月份项目汇总（共 30 个项目）

摘要：过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演过往项目 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 5 月份发布的项目《前端每日实战》专栏每天分解一个前端项目，用视频记录...

array_huang 2019-08-22 18:25 评论0 收藏0