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 ...
随机推荐
- redis与memacache的区别（转）
redis和memecache的不同在于:1.存储方式:memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性.2.数据支持类 ...
- Vue-Router嵌套路由
1:查看router-view所对应的位置,是属于顶级出口还是存在于某个组件当中 2:当router-view存在于某个组件当中时 const User = { template: ` <div ...
- CentOS7配置mailx使用外部smtp服务器发送邮件
转自huskiesir的博客: 发送邮件的两种方式: 1.连接现成的smtp服务器去发送(此方法比较简单,直接利用现有的smtp服务器比如qq.新浪.网易等邮箱,只需要直接配置mail.rc文件即可实 ...
- js/jQuery使用过程中常见问题/已踩过的坑大杂烩
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- 让数字变化炫酷起来，数字滚动Text组件[Unity]
让数字滚动起来 上周我的策划又提了样需求,当玩家评分发生变动时,屏幕出现人物评分浮层UI,播放评分数字滚动动画.这类数字滚动需求非常常见,我就按一般思路,将startvalue与endvalue每隔一 ...
- RCNN论文细节
写在前面: 本系列笔记主要记录本人在阅读过程中的收获,尽量详细到实现层次,水平有限,欢迎留言指出问题~ 这篇文章被认为是深度学习应用于目标检测的开山之作,自然是要好好读一下的,由于文章是前些日子读的, ...
- Java后台使用Websocket教程
在开发一个项目的时候使用到了WebSocket协议 什么是WebSocket? WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket A ...
- 一个开源的，跨平台的.NET机器学习框架ML.NET
微软在Build 2018大会上推出的一款面向.NET开发人员的开源,跨平台机器学习框架ML.NET. ML.NET将允许.NET开发人员开发他们自己的模型,并将自定义ML集成到他们的应用程序中,而无 ...
- Java堆和栈的区别和介绍，JVM的堆和栈
一.Java的堆内存和栈内存 Java把内存划分成两种:一种是堆内存,一种是栈内存. 堆:主要用于存储实例化的对象,数组.由JVM动态分配内存空间.一个JVM只有一个堆内存,线程是可以共享数据的. ...
- [Swift]LeetCode90. 子集 II | Subsets II
Given a collection of integers that might contain duplicates, nums, return all possible subsets (the ...