CSS 多行文本超链接下划线动效
先看效果
乍一看，是不是感觉很简单，仔细一瞅发现事情好像没有那么简单。
如果十分钟还没想出怎么实现，那就把简历上的“精通css”改成“了解css”……
大部分人第一感觉都是想着用border-bottom去做，但是仔细看一下这个是多行文本，下划线始终在最后一行肯定是不合适的，而且下划线运动轨迹是：鼠标移入-从从到尾显示，鼠标移出-从头到尾消失。
代码实现
让我们进入正题，这个效果是使用css的线性渐变linear-gradient实现的，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 400px;
}
.link {
font-size: 1.2em;
line-height: 1.6em;
text-decoration: none;
font-family: sans-serif;
color: #333;
}
.underline {
width: calc(100%); /* 兼容IE */
background-image: linear-gradient(transparent calc(100% - 2px), powderblue 2px);
background-repeat: no-repeat;
background-position: right;
background-size: 0% 100%;
transition: background-size 1s ease;
}
.link:hover .underline {
background-position: left;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="container">
<a class="link" href="#">
<span class="underline">I'm a super cool link because my underline animation works even in
multiple lines!
</span>
</a>
</div>
</body>
</html>
这里修改了background-position属性设置背景图像的起始位置，使得鼠标移出后的下划线运动轨迹是从头到尾消失，而不是反过来，如果不设置则是如下效果：
这个效果代码我就不复制了，把上面的background-position: right;和 hover 中的background-position: left;删掉就是了。
CSS 多行文本超链接下划线动效的更多相关文章
- css命名为何不推荐使用下划线_
一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...
- PowerPoint超链接字体颜色修改、怎么去掉超链接下划线
经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...
- css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色
一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...
- CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案
经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...
- 解决<a>文本本身带下划线和超链接下划线重合的问题
<a style="padding-bottom: 1PX;border-bottom: 1PX #254fc5 solid;text-decoration: none;"& ...
- CSS魔法堂：更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- 使用CSS去除 去掉超链接的下划线方法
我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到 1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...
- CSS超链接样式，去除下划线等
控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...
- 如何去掉a标签的下划线
首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符 ...
- 前端必须收藏的CSS3动效库！！！
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- Maven进阶
前言 在项目开发的过程中,我们通常要使用到外部依赖的组件,同时也会使用某些插件来帮助我们管理项目.例如,我们访问数据库的时候需要使用到jdbc组件,我们可以下载对应的jar包去加载到我们的应用中.在我 ...
- 使用Python接口自动化测试post请求和get请求，获取请求返回值
引言我们在做python接口自动化测试时,接口的请求方法有get,post等:get和post请求传参,和获取接口响应数据的方法: 请求接口为Post时,传参方法我们在使用python中request ...
- GGTalk 开源即时通讯系统源码剖析之：服务端全局缓存
继上篇<GGTalk 开源即时通讯系统源码剖析之:数据库设计>介绍了 GGTalk 数据库中所有表的结构后,接下来我们将进入GGTalk服务端的核心部分. GGTalk 对需要频繁查询数据 ...
- 【NestJS系列】从Nest CLI开始入门
初识Nest JS Nest 是一个渐进的 Node.js 框架,它可以在 TypeScript 和 JavaScript (ES6.ES7.ES8)之上构建高效.可伸缩的企业级服务器端应用程序. N ...
- GoFrame v2.5 版本发布，企业级 Golang 开发框架
大家好啊,GoFrame 框架今天发布了 v2.5.0 正式版本啦! 本次版本主要是对已有功能组件以及开发工具上的改进工作.其中,开发工具新增了 gf gen ctrl 命令,以规范化定义.开发 AP ...
- linux内核vmlinux的编译过程（七）
一. vmlinux目标及其构建规则 定义在顶层Makefile中,如下: # The all: target is the default when no target is given on th ...
- [Spring+SpringMVC+Mybatis]框架学习笔记：前言_目录
下一章:[Spring+SpringMVC+Mybatis]框架学习笔记(一):SpringIOC概述 前言 本笔记用于记录本人(Steven)的SSM框架学习历程,仅用作学习.交流,不用于商业用途, ...
- [C#]WPF 分辨率的无关性的问题
什么是WPF的分辨率无关性? 首先得解什么是Dpi(Density independent pixels ,设备无关像素),百度百科的解释DPI是指每英寸的像素,对应界面显示即是屏幕上每英寸的像素. ...
- Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
错误原因,我猜测多半是版本问题 在router/index.js中添加如下代码 const originalPush = VueRouter.prototype.push VueRouter.prot ...
- proxysql修改默认系统配置
前言 proxysql在第一次启动后,配置就从sqlite db中加载了,而不是配置文件. 有时候我们需要修改proxysql的默认配置,其相关配置在main.global_variables表中,可 ...