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中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
随机推荐
- 国产MCU兆易GD32实现矩阵按键扫描
一.矩阵键盘 为了减少I/O口的占用,通常将按键排列成矩阵形式.在矩阵式键盘中,每条水平线和垂直线在交叉处不直接连通,而是通过一个按键加以连接.使用8个io口来进行16个按键的控制读取,可以减 ...
- Linux系统运维之subversionEdge部署
一.介绍 Subversion Edge是Collabnet公司发布的SVN和Apache等组件结合的SVN管理工具.由于安装过subversion+apache,发现添加账户都需要登录服务器改配置, ...
- 如何在.net6webapi中记录每次接口请求的日志
为什么在软件设计中一定要有日志系统? 在软件设计中日志模块是必不可少的一部分,可以帮助开发人员更好的了解程序的运行情况,提高软件的可靠性,安全性和性能,日志通常能帮我们解决如下问题: 调试和故障排查: ...
- 最近很火的开源培训系统，支持免费商用，3个月1000star！
项目简介 PlayEdu 开源培训系统自发布以来,3个月内帮助上千位开发者部署了私有化培训平台,并在 Github 上获得了1000star. 项目地址 Github 地址:https://githu ...
- Unity中的RegisterPlugins：深入解析与实用案例
Unity中的RegisterPlugins:深入解析与实用案例 在Unity游戏开发中,我们经常需要使用第三方插件来实现一些特定的功能.为了让这些插件能够在Unity中正常工作,我们需要对它们进行注 ...
- Day05_Java_作业
A:看程序写结果(写出自己的分析理由),程序填空,改错,看程序写结果. 1.看程序写结果 class Demo { public static void main(String[] args) { i ...
- nginx配置文件内容（1）
nginx.conf内容 在Nginx服务器的主配置文件nginx.conf中,包括全局配置.I/O事件配置.HTTP配置这三大块内容,配置语句的格式为"关键字 值:"(末尾以分 ...
- CocosCreator基础
跳转到底部 目录 CocosCreator项目结构: 资源文件夹(assets) 资源库(library) 本地设置(local) 项目设置(settings) project.json 构建目标(b ...
- .Net 一套接口多实现
.Net 一套接口多实现 接口(interface)可理解为规范.标准.协议.接口是用来约束各方都在同一组规范下工作. 电脑外设USB接口,各个品牌商家生产的U盘.鼠标都能够被电脑主板识别并工作,这是 ...
- 自用 .net C# List集合和DataTable互转，可自定义表头
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...