.nav-menu>ul>li>a::before {
  background: #333 none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 2px;
  position: absolute;//注意a一定得是relation相对定位才行,::before可以看做是a的子元素,a是父元素
  left:-1px;//适当的调整一下子元素::before和父元素a的对齐距离
  width: 100%;//这一点很重要,宽度100%就能继承a的宽度,否则怎么设置都会很突兀
-webkit-transform:scale(0);
  transform:scale(0);
  -webkit-transition:all .5s ease 0s;
  transition:all .6s ease 0s;
}

.nav-menu>ul>li>a:hover::before{//a滑过时::before伪类的效果
//  animation:underline1 0.5s ease 0s normal forwords 1 runing ;//forwords让动画停留在最后的状态  后面的1是指只循环一次
//  background: #333 none repeat scroll 0 0;
//  bottom: -2px;
//  content: "";
//  height: 2px;
//  position: absolute;
  transform:scale(1);//只用这一句就够了
}

scale等比缩放才能做到看上去能让线条以中心点展开的更多相关文章

  1. [UE4]Scale Box:缩放容器

    一.Scale Box只能有一个子控件,再拖放一控件进去是不行的. 二.Scale Box缩放保持长宽比例 三. Scale Box.Strectching.Strectch:拉伸设置.  Scale ...

  2. 使用scale等比例缩放图片

    功能需求: 在下拉框中选择你所需要缩放的比例, 选择好了之后,图片会按照你选择的比例进行缩放 1==>如何获取select中option选中的值 在select添加事件change 和双向绑定v ...

  3. Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  4. Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...

  5. [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  6. (一)自定义ImageView,初步实现多点触控、自由缩放

    真心佩服那些一直专注于技术共享的大神们,正是因为他们无私的分享精神,我才能每天都有进步.近日又算是仔细学了android的自定义控件技术,跟着大神的脚步实现了一个自定义的ImageView.里面涉及到 ...

  7. 转:自定义控件三部曲之动画篇——alpha、scale、translate、rotate、set的xml属性及用法

    第一篇: 一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resour ...

  8. 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法

    前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随 ...

  9. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

随机推荐

  1. Django: 之Apache、Nginx部署以及发送邮件

    在这里讲述部署的方法和常见的问题,并给出了在BAE,JAE,SAE等上面部署的实例. Django + nginx + Gunicorn/uwsgi部署方式,参见另一篇:Django部署(nginx) ...

  2. 【矩阵压缩】 poj 1050

    题意:给一个矩阵,里面有正负数,求子矩阵和的最大值 #include <iostream> #include <cstdio> #include <stdlib.h> ...

  3. codeforces 665B Shopping

    暴力 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...

  4. mysql触发器的使用

    环境情况: 表1:residential_building,住宅楼表:id,community(所属社区),countFloor(楼层数),countUnit(单元数),countHomesInUni ...

  5. Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE

    Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE 晚上在测一个widget,前面测的好好的,后面再安装的时候发现如下错误:[2009-06- ...

  6. ASP.NET MVC 5 WEB API 用户验证

    参考博客:ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1) 参考博客:MVC WebApi 用户验证 (2)构建ASP.NET MVC5+E ...

  7. Deep learning:三十八(Stacked CNN简单介绍)

    http://www.cnblogs.com/tornadomeet/archive/2013/05/05/3061457.html 前言: 本节主要是来简单介绍下stacked CNN(深度卷积网络 ...

  8. php解决微信开发中用户昵称中的特殊字符与emoji表情写入mysql错误的问题

    解决办法:将3个字节的特殊字符与emoji表情替换掉即可. $nickname = preg_replace('/xE0[x80-x9F][x80-xBF]'.'|xED[xA0-xBF][x80-x ...

  9. ubuntu中mysql修改编码utf8

    摘要:Ubuntu Server 服务器下使用apt-get 命令安装的mysql,默认不是utf8.在这里记录一下如何将编码修改成utf8. 办法解决: 1.查看mysql编码 show varia ...

  10. [转]JavaScript通过参数动态调用函数——js中eval实现反射

    以下文章出自  http://blog.rongzhiwang.com/king/archive/2012/08/13/javascriptjseval.aspx       今天碰到人问这样一个问题 ...