zoukankan      html  css  js  c++  java
  • css 导航样式

    html  结构  

    <div class="nav-menu float-r">
    <ul class="menu-item">
    <li>
    <a class="full-size" href="index.html">
    首页
    </a>
    </li>
    <li>
    <a class="full-size" href="groupManage.html">
    产品
    </a>
    </li>
    <li>
    <a class="full-size" href="case.html">
    案例
    </a>
    </li>
    <li class="active">
    <a class="full-size" href="price.html">
    价格
    </a>
    </li>
    <li>
    <a class="full-size" href="business.html">
    合作代理
    </a>
    </li>
    <li>
    <a class="full-size" href="about.html">
    关于我们
    </a>
    </li>
    <li>
    <a class="full-size" href="help.html">
    帮助中心
    </a>
    </li>
    <!-- <li>
    <a class="full-size" href="experts.html">
    专家申请
    </a>
    </li> -->
    </ul>
    </div>

    css  :

    .menu-item .full-size:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    100%;
    background-color: #403c27;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
    transition: all .6s cubic-bezier(.19,1,.22,1)
    }

    .menu-item .full-size:hover:after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
    }

    效果:

    鼠标移到文字上,灰色的线条会从中间缓慢拉伸width:100%,鼠标移开,width:100% 变成  cale(0);

  • 相关阅读:
    Oracle EXP-00091解决方法
    Oracle 表空间的概念
    每天一点点oracle
    ntp服务问题
    Centos 7.4 安装samba服务
    Oracle group by
    Ansible介绍
    Gitlab应用——开发人员fetch分支,合并到master主分支申请
    Gitlab应用——系统管理
    Gitlab安装配置管理
  • 原文地址:https://www.cnblogs.com/-youth/p/11490158.html
Copyright © 2011-2022 走看看