CSS hover滑动下划线

51changxue
51changxue
51changxue
54
文章
3
评论
2019年1月10日03:28:01 1 244 views

将鼠标放到对应链接或者区块上,下方会出现从左到右的自动延长下划线。

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8"/>
    <title>下划线动画</title>
    <style>
        /*先把a的原有下划线样式给清除*/
        a,a:link,a:visited,a:focus{
            text-decoration:none;color:#000;
        }
        /*设置a的定位,给我们自己编写的下划线一个定位参考*/
        .left-to-right{
            position:relative;
        }
        /*使用伪类给a下面添加下划线*/
        /*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/
        .left-to-right::after{
            content:'';
            display:block;
            /*开始时候下划线的宽度为0*/
            width:0;
            height:3px;
            
            left:0;
            bottom:-10px;
            background:#000;
            /*这里我们设定所有改变都有动画效果,可以自己指定样式才有动画效果*/
            transition:all 0.3s ease-in-out;
        }
        .left-to-right:hover::after{
            width:100%;
        }
    </style>
</head>
<body>
<a href="#" class="left-to-right">鼠标经过从左向右延伸的下划线</a>
</body>
</html>
效果展示:
鼠标经过从左向右延伸的下划线
51changxue
  • 本文由 发表于 2019年1月10日03:28:01
  • 转载请务必保留本文链接:https://51changxue.com/1550.html
WordPress 5.0发布及功能介绍 网站优化

WordPress 5.0发布及功能介绍

WordPress 5.0于2018年12月7日正式发布,跟之前版本最大的区别就是采用了全新的模块文本编辑器。无论正在构建第一个站点、更新博客,还是以编写代码为生,您都会对如何显示内容具有更大的灵活性...
Wordpress之HTML5播放器插件 网站优化

WordPress之HTML5播放器插件

Videojs HTML5 Player 是一款具备友好用户界面,支持桌面和移动设备上视频回放的Wordpres视频播放器插件。通过Videojs库可以很方便的调用本地或者远端服务...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 成人之美 成人之美 0

      看起来还不错。