css奇淫巧计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
display: flex;
position: absolute;
width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} li {
position: relative;
padding: 20px;
font-size: 24px;
color: #000;
line-height: 1;
transition: 0.2s all linear;
cursor: pointer;
} li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
} li:hover::before {
width: 100%;
top: 0;
left: 0;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
} li:active {
background: #000;
color: #fff;
} </style>
</head>
<body>
<ul>
<li>不可思议的CSS</li>
<li>导航栏</li>
<li>光标小下划线跟随</li>
<li>PURE CSS</li>
<li>Nav Underline</li>
</ul>
</body>
</html>
效果图
css奇淫巧计的更多相关文章
- CSS布局奇淫巧计之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- .net 开发的奇淫巧计
随机数 Random random = new Random(( int)DateTime .Now.Ticks & 0x0000FFFF); 如何让ASP.NET Web API显示完整的错 ...
- CSS奇淫技巧
对于图标,使用fontsize设置大小,而非宽高! 高度不够的时候使用min-height 保持宽高比 四个方向的padding都是相对于 本盒子的宽度来的 常用于视频和图片的展示,比如轮播图. 所以 ...
- 记录一些css奇淫技巧
文本两端对齐 文字在固定宽度内两端对齐 text-align: justify; text-align-last: justify; 滤镜filter 元素(经常用作图片)置灰效果,类似disable ...
- CSS布局奇淫技巧之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- CSS布局奇淫技巧之--各种居中<转>
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- Zepto源码分析（二）奇淫技巧总结
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...
- [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文
我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...
- 优化DP的奇淫技巧
DP是搞OI不可不学的算法.一些丧心病狂的出题人不满足于裸的DP,一定要加上优化才能A掉. 故下面记录一些优化DP的奇淫技巧. OJ 1326 裸的状态方程很好推. f[i]=max(f[j]+sum ...
随机推荐
- 回文自动机（PAM） 学习笔记
原文链接www.cnblogs.com/zhouzhendong/p/PAM.html 前置知识 无. (强行说和KMP有关也是可以的……) 关于回文串的一些性质 1. 一个长度为 n 的字符串最多有 ...
- cobbler一键批量安装系统
cobbler是一个可以实现批量安装系统的Linux应用程序.它有别于pxe+kickstart,cobbler可以实现同个服务器批量安装不同操作系统版本. 一.系统环境准备及其下载cobbler 1 ...
- Stream闪亮登场
Stream闪亮登场 一. Stream(流)是什么,干什么 Stream是一类用于替代对集合操作的工具类+Lambda式编程,他可以替代现有的遍历.过滤.求和.求最值.排序.转换等 二. Strea ...
- 数据分析 大数据之路 四 numpy 2
NumPy 数学函数 NumPy 提供了标准的三角函数:sin().cos().tan(import numpy as np a = np.array([0,30,45,60,90])print (' ...
- 意识科学初步：David Chalmers的简单问题与困难问题
这是第一篇关于意识科学的内容.主要谈一下阅读大卫查莫斯的几篇论文的一些观点和思考. 论文作者简介(摘自wiki): David John Chalmers (born 20 April 1966) i ...
- BZOJ2640 : 可见区域
设$base$表示直接能看到的面积,$f[i]$表示仅去掉线段$i$后新增的面积,$g[i][j]$表示仅去掉线段$i$和$j$后新增的面积. 删除一条线段的答案为$base+\max(f[i])$. ...
- 使用PIA查找组件的PeopleSoft导航
导航到企业组件>查找对象导航. 使用组件名称 使用页面名称 使用辅助页面名称 使用内容参考名称 只需输入对象名称,然后单击“搜索”即可.在这个例子中.我们知道组件名称即'PRCSDEFN',我们 ...
- sketch2code 有的叫screenshot to code什么的
先mark一下项目,回头再深究 https://github.com/mzbac/sketch2code https://www.floydhub.com/emilwallner/datasets/h ...
- 批量删除Excel里面的换行符
关于批量删除excel里面的换行符,应该说写程序的遇上excel大体都会有这么个问题,在解决这个问题前,我的解决办法是把excel 的数据全部复制到txt里面, 因为操作txt比操作excel更为简单 ...
- Mybatis中的Caused by: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): 找不到Mapper.xml文件的问题
1 首先在配置mapper-locations的时候: classpath: 只在现有目录下寻找配置文件 classpath*: 在现有的项目目录下和依赖的jar包下寻找xml配置文件