<!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奇淫巧计的更多相关文章

  1. CSS布局奇淫巧计之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  2. .net 开发的奇淫巧计

    随机数 Random random = new Random(( int)DateTime .Now.Ticks & 0x0000FFFF); 如何让ASP.NET Web API显示完整的错 ...

  3. CSS奇淫技巧

    对于图标,使用fontsize设置大小,而非宽高! 高度不够的时候使用min-height 保持宽高比 四个方向的padding都是相对于 本盒子的宽度来的 常用于视频和图片的展示,比如轮播图. 所以 ...

  4. 记录一些css奇淫技巧

    文本两端对齐 文字在固定宽度内两端对齐 text-align: justify; text-align-last: justify; 滤镜filter 元素(经常用作图片)置灰效果,类似disable ...

  5. CSS布局奇淫技巧之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. CSS布局奇淫技巧之--各种居中<转>

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  7. Zepto源码分析（二）奇淫技巧总结

    Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...

  8. [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文

    我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...

  9. 优化DP的奇淫技巧

    DP是搞OI不可不学的算法.一些丧心病狂的出题人不满足于裸的DP,一定要加上优化才能A掉. 故下面记录一些优化DP的奇淫技巧. OJ 1326 裸的状态方程很好推. f[i]=max(f[j]+sum ...

随机推荐

  1. A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header

    使用arduino烧写esp32模块遇到的无法烧录问题,时钟无法烧录遇到如下提示 后来搜索在如下连接找到解决方法: https://github.com/espressif/esptool/issue ...

  2. Largest Rectangle in a Histogram [POJ2559] [单调栈]

    题意一个围挡由n个宽度为1的长方形挡板下端对齐后得到,每个长方形挡板的高度为hi.我们把其抽象成一个图形,问这个图形中包含的面积最大的长方形是多大? 输入多行数据,每行第一个为n,后面n个数,代表hi ...

  3. vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel

    公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...

  4. libevent入门介绍

    libevent是之前看到的一个别人推荐的清凉级网络库,我就想了解一下它.今天下载到了一个人写的剖析系列,从结构和源码方面进行了简要分析.只是这个分析文章是2010年的,有点过时了(跟现在的libev ...

  5. MORE XOR

    MORE XOR #include<bits/stdc++.h> using namespace std; ; int a[maxn]; ][maxn]; int main() { ios ...

  6. ASP.NET MVC 网页应用 action 传递的Model

    视图界面 @using {引用模型} @model {具体模型} <html> @Model.{具体模型的属性} </html> 注意区分Model的大小写 引入时,使用@mo ...

  7. vue单页面应用刷新网页后vuex的state数据丢失的解决方案

    1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...

  8. Springboot 拦截器 依赖注入失败

    解决方案2种. ====1 https://blog.csdn.net/shunhua19881987/article/details/78084679 ====2 https://www.cnblo ...

  9. 封装一个 员工类 使用preparedStatement 查询数据 （2） 使用 arrayList 集合

    创建 员工=类生成 有参构造 get set 方法 toString 方法 package cn.hph; public class emp1 { //创建员工类的属性 private int id; ...

  10. 《JavaScript DOM编程艺术》学习笔记（一）

    这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从5月10号开始看的吧,一直看到现在,差不多要看完了,书是挺厚的...286页,不过比起JAVASCRIPT权威指南来说还是差多了,权威指南才 ...