CSS动画：有活力的链接下划线

链接下划线是非常常见的一种样式，最近做了一个非常简单的视觉效果，非常不错，可以点下面链接查看。

http://jsbin.com/zanewe/edit?html,css,output

创建这种效果是非常简单的，不需要添加额外的DOM元素到HTML，不过需要考虑一下浏览器的兼容性问题，在老旧版本的浏览器中它只会显示为一个普通的下划线。

好了，现在正式开始。我们需要做的第一件事就是去除text-decoration，并设置链接为相对定位。我们需要确保链接在hover时不会改变颜色，这里我们拿h2举例：

h2 > a {position: relative;color: #000;text-decoration: none;
}h2 > a:hover {color: #000;
}

接下来，我们要添加border，通过变换隐藏它。插入一个:before并且设置它scaleX（0），保守起见，如果浏览器不支持，我们通过visibility: hidden隐藏它。

h2 > a:before {content: "";position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: #000;visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;
}

最后设置动画时间为0.3s，现在我们只需要设置元素在hover时显示并且scaleX(1)：

h2 > a:hover:before {visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1);
}

大功告成！??????

这样就完成了一个很有活力的下划线动画

CSS动画：有活力的链接下划线相关推荐

php文字链接下划线怎么取消,css怎么去掉超链接下划线
在网页中难免有若干对文字A超链接锚文本,但是在默认情况下带链接的文字全部都是有下划线效果的,那么如何把这个超链接的下划线效果给去掉呢?那我们就要借助强大的CSS了. 通过CSS设置要想让带超链接锚文本 ...
html下划线输入框自动延伸,纯CSS实现从中间延展的下划线
这是我从前端客上看到的一个特效,也就是使用scaleX()实现从中间延展的下划线,缩放是从元素的中间开始的.这是我从没有想到的,X轴缩放! 在这个例子中还使用到了hover对兄弟元素的操控哦. 下面让 ...
css中a标签中去掉下划线注意事项
需求文件 css中a标签中去掉下划线注意事项对于css中a 标签去掉下划线有一个注意事项代码如下: <!DOCTYPE html> <html><head>< ...
html如何让链接下划线消失,css让超链接不加下划线？
html中a标签是用来设置超链接的,不加任何的css样式,a标签默认会有一条下划线,本篇文章将介绍如何使用css去除a标签的下划线,感兴趣的同学,一起来学习吧. css让超链接不加下划线? css中去 ...
CSS去掉链接下划线的方法
a:link {text-decoration: none} text-decoration还有以下几种取值: none 默认.定义标准的文本. underline 定义文本下的一条线. overli ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
php文字链接下划线怎么取消,html超链接怎么去掉下划线
html超链接怎么去掉下划线? 可以用css的text-decoration:none来取消连接的下划线这是一个链接扩展资料: 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标 ...
HTML如何去掉链接下划线
我们可以用CSS语法来控制超链接的形式.颜色变化. 下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色:当鼠标在链接上时有下划线,链接文字显示为红色:当点击链接后,链接无下划线,显示为 ...
[CSS]分享几条漂亮的下划线样式
早上看到一篇博客,内容没什么,但其中有几条漂亮的下划线感觉非常不错,虽然非常简单,但对于经常写博的人很有用,这里分享一下,喜欢的就直接拿去用吧. 使用方法: 1.后台管理->设置:[页首Html ...

CSS动画：有活力的链接下划线

CSS动画：有活力的链接下划线相关推荐

最新文章

热门文章