html炫酷的导航栏效果,css3制作炫酷导航栏效果

今天主要利用hover选择器。鼠标滑过查看效果。

一。普通导航栏

Home

Content

Service

Team

Contact

对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单。

(1)使用ul标签布局

(2)鼠标经过事件

  • Homeli>
  • Contentli>
  • Serviceli>
  • Teamli>
  • Contactli>

    ul>

    div>

    *{padding:0;margin:0;list-style:none;text-decoration:none;

    }a{color:#fff;

    }#demo1{width:600px;

    }#demo1 ul li{float:left;width:100px;height:50px;text-align:center;background:#ccc;line-height:50px;color:#FFF;

    }#demo1 ul li:hover{background:#999;

    }

    (二)括号类导航栏

    Home

    Content

    Service

    Team

    Contact

    对于导航栏的排版这里就不多说了,可以看到当鼠标经过的时候会从文字中出现括号,思路:

    (1)当无鼠标经过事件时,括号其实是有的,只不多它处于隐形状态在文字中间

    (2)当鼠标经过时,括号从中间移动到两边,并且从隐形变为显示。

    • Homea>li>
    • Contenta>li>
    • Servicea>li>
    • Teama>li>
    • Contacta>li>

      ul>

      div>

      #demo2{width:600px;height:50px;margin:20px auto;

      }#demo2 ul li{position:relative;float:left;width:100px;height:50px;text-align:center;line-height:50px;background:#000;

      }#demo2 ul li a:before{content:"[";margin-right:10px;transform:translateX(20px);-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);

      }#demo2 ul li a:after{content:"]";margin-left:10px;transform:translateX(-20px);-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);

      }#demo2 ul li a:before,#demo2 ul li a:after{display:inline-block;opacity:0;transition:transform 0.3s, opacity 0.2s;-moz-transition:transform 0.3s, opacity 0.2s;-webkit-transition:transform 0.3s, opacity 0.2s;-ms-transition:transform 0.3s, opacity 0.2s;

      }#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);

      }

      三。滑动导航栏

      Home

      Content

      Service

      Team

      Contact

      从演示效果来看要注意两点

      (1)鼠标经过时有横向从上到下

      (2)鼠标经过时文字从上到下并且变换颜色

      这就和上一个例子很像了

      (1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。

      (2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:

      ①文字从现位置划下

      ②文字从出现在上方

      ③文字从上方滑到现位置

      • Homespan>a>li>
      • Contentspan>a>li>
      • Servicespan>a>li>
      • Teamspan>a>li>
      • Contactspan>a>li>

        ul>

        div>

        #demo3 ul li{float:left;margin:0 25px;position:relative;

        }#demo3 ul li a{color:#D8761E;font-family:'Righteous', cursive;display:block;padding:10px 0;

        }#demo3 ul li span{display:block;

        }#demo3 ul li a:before{content:"";position:absolute;width:100%;height:3px;background:#D8761E;bottom:0;opacity:0;-webkit-transform:translate3d(0, -40px, 0);transform:translate3d(0, -40px, 0);-webkit-transition:-webkit-transform 0s 0.3s, opacity 0.2s;transition:transform 0s 0.3s, opacity 0.2s;

        }#demo3 ul li a:hover::before{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:-webkit-transform 0.5s, opacity 0.1s;transition:transform 0.5s, opacity 0.1s;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);

        }#demo3 ul li a:hover span{color:#510301;-webkit-animation:anim-francisco 0.3s forwards;animation:anim-francisco 0.3s forwards;

        }@-webkit-keyframes anim-francisco{50% {

        opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);

        }51%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);

        }100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);

        }}

        @keyframes anim-francisco{50% {

        opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);

        }51%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);

        }100%{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);

        }}

        这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。

        里面的标签就不解释了,自己查效果会更好哦。

        我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~ 不过自己编译的话在浏览器里是正常的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值