效果：

代码：

a{padding: 10px 10px; position: relative;}

a:before{content: ''; width: 100%; height: 3px; background-color: #f00; transform: scaleX(0); -webkit-transform: scaleX(0); transition: all 0.2s; -webkit-transition: all 0.2s; position: absolute;

    bottom: 0px; left: 0px;}

a:hover{color: #0000d0;}

a:hover:before{transform: scaleX(1); -webkit-transform: scaleX(1);}

实现菜单底部线条沿着 X 轴的值缩放转换scaleX的更多相关文章

  1. navigationController 去掉背景图片、去掉底部线条

    //去掉背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMe ...

  2. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  3. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  4. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  5. 【ZedGraph】右键菜单和鼠标滚轴的移动缩放等功能的启用和禁用 (转)

    通过[ZedGraph]控件属性修改: 1.禁用右键菜单: IsShowContextMenu = false; 2.禁用鼠标滚轴移动: IsEnableHPan = false; //禁止横向移动; ...

  6. 让 cell 显示底部线条时,总是有几个线条被隐藏.

    一,经历 1> 感觉像是重用的问题,但从代码的分析中找不出任何问题. 2> 感觉像是我 在创建怎样的 cell 的代码 被 layoutsubviews 方法覆盖了一样.于是先在创建怎样的 ...

  7. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  8. 改变navigationbar的底部线条颜色

    [[UINavigationBar appearance] setBackgroundImage:[UIImage new]forBarMetrics:UIBarMetricsDefault]; CG ...

  9. 底部线条css样式

    1.首先固定宽高 (将文字移至左边,例如 “姓名:”) .line{ width:100%; height:40px; float:left; border-bottom:1px solid #ccc ...

随机推荐

  1. fidder抓包使用(一)

    fidder是会占用 jupyter 端口的,在fidder里边最上边找到tools--->options-->connections里边的8888改成别的重启jupyter就好了

  2. Java中用JXL导出Excel代码详解

    jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文支 ...

  3. python的工具pip进行安装时出现 No module named 'pip'

    现象: 解决: python -m ensurepip easy_install pip python -m pip install --upgrade pip #用于更新pip,默认安装的是pip9 ...

  4. Liferay 7：portlet name

    总结自: https://web.liferay.com/zh/web/user.26526/blog/-/blogs/proper-portlet-name-for-your-portlet-com ...

  5. 第十章—DOM（三）——Text类型

    文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征: 看看下面的代码: div元素开始和结束标签只要存在内容,就会创建一个文本节点.可以使用以下代码来访问元素的这些文本子节点: 访问 ...

  6. 百度DMLC分布式深度机器学习开源项目（简称“深盟”）上线了如xgboost（速度快效果好的Boosting模型）、CXXNET（极致的C++深度学习库）、Minerva（高效灵活的并行深度学习引擎）以及Parameter Server（一小时训练600T数据）等产品，在语音识别、OCR识别、人脸识别以及计算效率提升上发布了多个成熟产品。

    百度为何开源深度机器学习平台?   有一系列领先优势的百度却选择开源其深度机器学习平台,为何交底自己的核心技术?深思之下,却是在面对业界无奈时的远见之举.   5月20日,百度在github上开源了其 ...

  7. java贪吃蛇小游戏详解

    https://blog.csdn.net/u011622021/article/details/81162083

  8. Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组，可以去掉任意一个元素，问剩余数列的困难值的最小值是多少】

    A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  9. Effective Modern C++：07并发API

    C++11的志伟功勋之一,就是将并发融入了语言和库中,因此在C++的历史上,程序员可以首次跨越所有平台撰写具有标准行为的多线程程序. 35:优先选用基于任务而非基于线程的程序设计 如果需要以异步的方式 ...

  10. cp和mv命令

    注意事项:mv与cp的结果不同,mv好像文件“搬家”,文件个数并未增加.而cp对文件进行复制,文件个数增加了. 一.cp命令 cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将 ...