专栏首页前端开发随笔Css制作hover下划线动画

Css制作hover下划线动画

    .demo {
        position: relative;
        font-size: 20px;
        display: inline-block;
        cursor: pointer;
    }

    .demo:before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0;
        height: 2px;
        background: #4285f4;
        transition: all .3s;
    }

    .demo:hover:before {
        width: 100%;
        left: 0;
        right: 0;
    }
 <div class="demo">自己实现的hover效果</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序锚点选择导航栏

    wePanda
  • Vue函数调用自定义组件

    无需导入vue文件,一段js调用自定义组件 components文件夹新建loading文件夹 在里面存放index.js和index.vue

    wePanda
  • scrollReveal实现网页重复动画效果

    wePanda
  • 如何在程序中加入Growl通知

    Growl for Windows – Mac 样式的信息提示工具。目前已经支持的软件包括:Outlook,Visual Studio 等以及一个利用命令行从本...

    张善友
  • 博客园加上博客精灵

    http://files.cnblogs.com/files/flipped/spig.js换成你的js代码(为什么要换呢?因为里面有的内容需要修改,比如有网址...

    饶文津
  • 无人驾驶引爆点已至,中国将比美国走得更快?

    智能手机堪称千载难逢的机会,它催生了大量的新经济:移动互联网、共享经济、O2O…在智能手机走向成熟之际,人类开始寻觅下一波产业大潮。虚拟现实(VR)和人工智能(...

    罗超频道
  • 【技术创作101训练营】教你一招另辟蹊径抓取美团火锅数据

    今天借腾讯云+社区这个机会,给大家简单分享下美团数据的简易获取教程,希望小小白们也可以学会这招,下次再有人找你要数据的时候,你就可以拍腿板跟她说,让我来!

    前端皮皮
  • 李彦宏两会提案无人车立法,美国无人车率先合法化了……

    本周Google官网公布了美国国家公路交通安全管理局对谷歌Alphabet公司的决议文件,透露的关键信息是,谷歌无人驾驶车符合联邦法律,并且无人驾驶汽车的司机是...

    罗超频道
  • NIO框架入门(一):服务端基于Netty4的UDP双向通信Demo演示

    NIO框架的流行,使得开发大并发、高性能的互联网服务端成为可能。这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2、而Netty的...

    JackJiang
  • 数据看Kobe,请让我以这样的方式说再见

    大数据文摘

扫码关注云+社区

领取腾讯云代金券