文字下划线从中间往两头延伸动画

如图所示：

可用方法：
javascript```

li>a:after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 2px;background: #0052d9;transform: scale(0);-ms-transform: scale(0);-moz-transform: scale(0);-webkit-transform: scale(0);transition: all .3s;-ms-transition: all .3s;-moz-transition: all .3s;-webkit-transition: all .3s;-webkit-box-sizing: border-box;box-sizing: border-box;
}li>a:hover:after {transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-webkit-transform: scale(1);
}

文字下划线从中间往两头延伸动画相关推荐

02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
php css下划线,CSS文字下划线的设置方法介绍
在整体网页设计中,最容易识别的风格仍然是带有下划线的蓝色文字,这大部分都是链接到另一个网页中.链接元素默认具有样式,蓝色是默认模式下的唯一颜色.即使现在的链接元素可能不再需要加下划线,文本下的行不仅仅 ...
Unity的UGUI使用Text和Image实现文字下划线
Unity的UGUI使用Text和Image实现文字下划线引子效果设置原文链接引子效果写需求的时候搜了一些文字加下划线的方法,UGUI的Text,大都需要写一堆代码来封装Text,比较麻烦. ...
文字下划线效果（标题hover效果）
文字下划线效果(标题hover效果)  <div> <a href="javascript:void(0);" clas ...
php css下划线,css如何添加文字下划线样式？（代码详解）
css如何添加文字下划线样式?本篇文章就给大家介绍css添加文字下划线样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css添加文字下划线样式的方法有哪 ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
html的u标签去掉文字下划线代码
html的u标签去掉文字下划线代码 <div class="tile_stats_count"><span class="count_top" ...

文字下划线从中间往两头延伸动画

文字下划线从中间往两头延伸动画相关推荐

最新文章

热门文章