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中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- 一文了解Go语言的匿名函数
1. 引言 无论是在Go语言还是其他编程语言中,匿名函数都扮演着重要的角色.在本文中,我们将详细介绍Go语言中匿名函数的概念和使用方法,同时也提供一些考虑因素,从而帮助在匿名函数和命名函数间做出选择. ...
- 精选Golang高频面试题和答案汇总
大家好,我是阳哥. 之前写的< GO必知必会面试题汇总>,已经阅读破万,收藏230+. 也欢迎大家收藏.转发本文. 这篇文章给大家整理了17道Go语言高频面试题和答案详解,每道题都给出了代 ...
- 给 Helm 提一个 PR，重温开源项目参与过程
目录 逛社区 领任务 复现 Bug 用 GPT-4 来准备 Bug 复现材料 对着 GPT-4 给的命令复现 Bug 定位 Bug 修复思路 编写代码 测试 提 PR 逛社区 酒足饭饱,闲来无事,打开 ...
- Unity中的PostProcessScene：深入解析与实用案例
Unity中的PostProcessScene:深入解析与实用案例 在Unity游戏开发中,我们经常需要对场景进行后处理,以实现更丰富的视觉效果.Unity提供了一个名为PostProcessScen ...
- 2023-07-09：给定N、M两个参数， 一共有N个格子，每个格子可以涂上一种颜色，颜色在M种里选， 当涂满N个格子，并且M种颜色都使用了，叫一种有效方法。 求一共有多少种有效方法。 1 ＜= N,
2023-07-09:给定N.M两个参数, 一共有N个格子,每个格子可以涂上一种颜色,颜色在M种里选, 当涂满N个格子,并且M种颜色都使用了,叫一种有效方法. 求一共有多少种有效方法. 1 <= ...
- 通过ssh远程执行kubectl命令报错问题
在使用Jenkins链接Kubernetes集群,如果Jenkins安装机器与Kubernetes Master节点不在同一台机器上面,需要使用ssh远程执行部署命令,如下: ssh root@10. ...
- 使用npm下载vue
一.安装npm 1. 安装node.js npm(Node Package Manager): node.js下的包管理器 前往node.js官网下载并安装工具,nodejs安装完毕后自动会安装npm ...
- mysql的初体验——重装解决99%的问题
这两天被java_web的作业搞得头皮发麻,主要原因就是因为jdbc连接数据库一直失败,甚至差点把电脑搞崩,删个注册表,结果用户变量也被删了,心态直接炸裂.有以下几个地方,引以为戒: 1.配置环境最好 ...
- 模型部署 — PaddleNLP 基于 Paddle Serving 快速使用（服务化部署 - Docker）— 图像识别 + 信息抽取(UIE-X)
目录 流程 版本 安装 Docker 安装 PaddleNLP 安装 环境准备 模型准备 压缩模型 下载模型 模型部署 环境配置 启动服务 测试 -- 暂时还没通过 重启 图像识别 + 信息抽取(UI ...
- 文心一言 VS 讯飞星火 VS chatgpt （73）-- 算法导论7.1 4题
四.如何修改 QUICKSORT,使得它能够以非递增序进行排序? 文心一言: 快速排序(Quicksort)是一种常用的排序算法,基于分治策略进行设计.默认情况下,快速排序会以递增序进行排序.若想修改 ...