#yyds干货盘点# 使用background实现花式下划线
Posted 战场小包
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点# 使用background实现花式下划线相关的知识,希望对你有一定的参考价值。
前言
该文作为《文字效果到底能玩出多少花样》的第三篇文章,带大家学习 background实现各种下划线效果 。
实现效果如图:
基础知识
按照惯例,首先进行基础知识的学习。
background-size
: 指定背景图像的大小length
: 设置背景图片的高度和宽度,第一个值为高度,第二个值为宽度percentage
: 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。cover
: 保持图片的宽高比并将图像缩放成将完全覆盖背景定位区域的最小大小contain
: 此时会保持图像的宽高比并将图像缩放成将适合背景定位区域的最大大小。
background实现下划线
文字的下划线其实并不难实现,css3
提供的 text-decoration
属性就可以轻易实现,但这里咱们使用 background
来实现一下。
设置背景颜色 background
为渐变颜色,之后通过上面学习 background-size
将高度设置为 3px
就可以实现下划线效果。
span
background: linear-gradient(90deg, #0cc, #0cc);
background-size: 100% 3px;
background-repeat: no-repeat;
background-position: 100% 100%;
color: #0cc;
下滑虚线实现
用 background
实现下划线功能怎么都感觉有几分大材小用,那咱们需求升级一下,生成下滑虚线效果。
下划虚线与下划线的区别只在于虚线部分,因此 background-size
无需修改,那该如何实现那?
很简单,只需要设置背景为一半透明,一半蓝色,使用 background-repeat 就能实现。下面直接来看代码
background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
background-size: 10px 2px;
background-repeat: repeat-x;
实现hover时出现的渐变下划线
感觉上面的还是很简单,继续难度加大,当 hover
时,文字底部出现渐变的下划线(封面效果三)。
咱们来分析一下需求:
- 渐变下划线: 实现起来比较简单,
background: linear-gradient
使用渐变色即可 - 渐渐出现: 动画效果,使用
transition
实现 hover
时显示:hover
伪类- 下划线从
0
到全部显示: 下划线是通过background
实现的,并且可以通过配置background-position
设置其显示大小,那么我们可以初始化时设置为不显示 ,hover
时设置为100%
就可以实现。
a
background-size: 0 3px;
background-position: 0 100%;
transition: 1s all;
a:hover
background-size: 100% 3px;
color: #000;
后语
伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞
以上是关于#yyds干货盘点# 使用background实现花式下划线的主要内容,如果未能解决你的问题,请参考以下文章
#yyds干货盘点# springboot使用@Async实现异步调用