HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...

在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外,CSS还有很多技术方案可以给文本添加下划线效果,比如border-bottom、box-shadow、background-image等。对于Web开发者而言,更庆幸的是,CSS还有更多的,更灵活的特性实现文本下划线的效果。在这篇文章中,将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

新的text-decoration特性

text-decoration并不是一个新特性,在CSS 2.1中,text-decoration就可以使用none、underline、overline和line0-through给文本添加下划线、删除线等效果。只不过,在新的CSS规范中(CSS Text Decoration Module Level 3 和 Level 4)添加了一些新特性。比如:

text-decoration-line: none | [ underline || overline || line-through || blink ]

text-decoration-style: solid | double | dotted | dashed | wavy

text-decoration-color:

text-decoration-thickness: auto | from-font |

text-decoration-skip: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

text-decoration-skip-ink: auto| none

其中text-decoration-line、text-decoration-style和text-decoration-color还可以简写成text-decoration:

text-decoration: || ||

除些之外,还新增了text-underline-position和text-underline-offset属性给文本设置下划线样式:

text-underline-position: auto | [ under || [ left | right ] ]

text-underline-offset: auto |

来看一个简单的示例:

自定义下划线效果

文章开头就提到过,除了使用text-decoration-*和text-underline-*属性可以给文本添加下划线效果之外,还可以使用一些其他方法来给文本添加自定义下划线的效果,比如下面两篇文章中提到的方法:

随着CSS的Clipping和Masking技术越来越成熟,我们可以配合CSS的伪元素实现一些更有创意的下划线效果。

使用clip-path给文本添加下划线

div {

width: 200px;

height: 200px;

background-color: #f36;

animation: melt-enter 2s ease-in alternate infinite,melt-leave 4s ease-out 2s alternate infinite;

cursor: pointer

}

@keyframes melt-enter {

0% {

clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');

}

100% {

clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');

}

}

@keyframes melt-leave {

0% {

clip-path: path('M0 0C8.33 -8.33 16.67 -12.5 25 -12.5C37.5 -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.5 -34.37 87.5 -4.01 100 0C112.5 4.01 112.38 -18.34 125 -18.34C137.62 -18.34 138.09 1.66 150.48 0C162.86 -1.66 162.16 -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');

}

100% {

clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');

}

}

效果如下:

如果你的浏览器没看到任何效果的话,请更换Firefox 63+浏览器查阅,你将会看到下面这样的效果:

95752a28be0069ae72a8f78515526bfe.gif

将这个创意放到文本下划线中也是可以的,只不过需要借助CSS的伪元素:

div {

display: inline-flex;

font-size: 30px;

position: relative;

cursor: pointer;

&::after {

content: '';

position: absolute;

top: calc(100% + 6px);

left: 0;

right: 0;

height: 10px;

background-color: currentColor;

animation: 2s melt-enter;

}

&:hover::after {

color: #f36;

animation: 2s melt-leave;

}

}

效果如下:

40d0cf5a9d75a237a06c724d7888623d.gif

使用SVG实现自定义下划线效果

使用clip-path给文本添加下划线效果,可以帮助我们实现很多具有创意的效果,还可以配合CSS的animation来实现带有动画效果的下划线。其实,除了上面提到的方案之外,我们还可以在background-image中使用SVG给文本添加很多与众不同的下划线效果。比如:

上面的示例中引用像下面这样的一个使用SVG绘制的线条:

.st0{fill:#f3bc34}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android组建之间通信_Android各组件/控件间通信利器之EventBus

实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变。举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对…

学员感言html效果图,学员感言丨非计算机专业学员 开始学HTML5的点点滴滴

学员感言丨非计算机专业学员 开始学HTML5的点点滴滴来源:奇酷教育 发表于:2017-08-03 12:09:25在奇酷学员学习HTML5的这段时间里,让我学习到了实用的技能和知识。我是一个非计算机类学生,可以说是对编程一窍不通,在选择…

怎样发量暴增_发量少怎么增加发量 秃发女孩必学发量激増6招

发量少真的是秃发女孩心底的痛,女明星中发量多的代表是范冰冰,范爷的浓密发量令人羡慕不已,发量少的女明星代表就是杨幂,杨幂在三生三世里的后移发际线让网友群嘲不已,下面5号网小编带大家来看一下发量少怎么增加发量&…

html序列符号替换,Html标签替换(过滤掉html特殊符号)

/// ///替换标签&#xff0c;把 <>" 替换为HTML标记/// /// /// public static string returnHtml(stringstr){if (str.Trim() ! ""){str str.Replace("<", "str str.Replace(">", "str str.Replace(" ", …

vue项目导入elementui_在vue项目中使用elementui

如何让你的前端程序看起来很优雅而又简单。最近我做的项目几乎都是管理系统&#xff0c;所以为了节约时间&#xff0c;开始使用ui框架-----elementui。一个简单的管理系统来说&#xff0c;这套ui框架足够使用了&#xff0c;而且对样式的自定义来说&#xff0c;这套ui框架相对于…

42021高考成绩查询北京6一个,北京高考成绩查询时间:6月27日

北京教育考试院发布&#xff1a;2014北京高考成绩将于6月27日公布。本文有出国留学网高考频道为大家搜集整理&#xff0c;希望对大家有所帮助。平行志愿只进行一轮投档从2014年起&#xff0c;北京高招本科志愿设置从“小平行志愿方式”调整为“平行志愿组方式”。本科一批、二批…

tecplot批量导出图片_tecplot使用教程

Tecplot的使用方法之前也零零星星的使用这个软件&#xff0c;但是作图主要还是使用Matlab软件。此次以给文章作图为契机&#xff0c;正好系统的学习一下。Tecplot有多个版本&#xff0c;当前使用的是比较新的Tecplot 360 EX 2018版。搜索到的教程中有Tecplot 360 2010版本的。常…

请领导批阅文件怎么说_请领导吃饭,不要对外说,职场员工为何如此保密?

前一段时间公司员工晋升&#xff0c;因为小王在公司的表现非常不错&#xff0c;所以成为了公司领导的秘书。其实按理来说&#xff0c;成为公司领导的秘书与否&#xff0c;往往只需要看这个员工有没有眼力&#xff0c;看她的办事能力如何&#xff0c;能不能提高公司的整体效率&a…

幼儿使用计算机需要注意事项,儿童玩电脑注意事项

相信现在的家庭里面很多小孩子爱玩电脑&#xff0c;但是电脑玩多了&#xff0c;对孩子眼睛、身体都不好&#xff0c;那么应该怎么才能科学玩电脑呢&#xff1f;妈网百科给大家总结了一些其他家长的经验&#xff0c;希望能够帮得到各位有需要的家长。【与电脑保持距离】孩子与电…

c++实现卷积码编码和维特比译码_鑫艾勒维特家用别墅电梯:安全至上,无可替代...

近年来&#xff0c;随着房地产行业的兴起&#xff0c;家用别墅电梯作为房地产配套产业也逐渐走进了平常家庭别墅中&#xff0c;如今一句俗语“无梯不成墅”将电梯在别墅中的重要地位彰显的淋漓尽致。艾勒维特家用液压小电梯因其适用于私人住宅&#xff0c;适用场景多样等特点&a…

山东高中计算机知识,普通高中信息技术课程标准(2017年版)解读

六、实施建议实施建议主要从教学与评价建议、水平等级考试命题建议、教材编写建议及课程实施建议四个方面展开。(一)教学与评价建议教学建议上&#xff0c;紧密围绕学科核心素养&#xff0c;凸显“学主教从、以学定教、先学后教”的专业路径&#xff0c;具体从领会学科核心素养…

python是一种跨平台、开源、免费的高级动态编程语言吗_python是一种跨平台、开源、免费的高级动态编程语言,对么...

python是一种跨平台、开源、免费的高级动态编程语言&#xff0c;对。python具有简单、易学、速度快、免费、开源、可移植性、可扩展性、丰富的库等优点。python语言极其容易上手&#xff0c;它是一种代表简单主义思想的语言。python是一种跨平台、开源、免费的高级动态编程语言…

html js 打印编辑页眉,js 设置网页打印的页眉页脚和页边距

var HKEY_Root,HKEY_Path,HKEY_Key;HKEY_Root"HKEY_CURRENT_USER";HKEY_Path"//Software//Microsoft//Internet Explorer//PageSetup/";var head,foot,top,bottom,left,right;//取得页面打印设置的原参数数据function PageSetup_temp() {try{var Wshnew Ac…

某个元素的距离页面的左边距_如何提高办公写作效率?先设置好页面上的这4类数据,准没错...

有人说&#xff0c;在体制内混的好&#xff0c;首先要文笔好。这里要说的是&#xff0c;一个文笔好的人&#xff0c;可能在哪里都能混的好。#直言职场#因为很多表达形式都需要以文字做雏形&#xff0c;进而进行各种形式的变换和转化。就拿当下很热门的自媒体行业来说&#xff0…

简述使用计算机对会计工作的影响,简述使用计算机对会计工作的影响。

简述使用计算机对会计工作的影响。更多相关问题[多选] 创新战略的层面有()。[单选] ()是对现有产品、流程、方法的所做的渐进式改善&#xff0c;使得现有产品或功能有进一步的改善、更方便或更为便宜。[单选] ()指组织对竞争者短期内的优缺点及长期力与策略的了解。[单选] ()实…

图像ISP处理——自动曝光AE算法

图像ISP&#xff08;图像信号处理&#xff09;是指对通过摄像头捕捉到的图像进行处理和优化的算法。这些算法旨在改善图像的质量&#xff0c;增强细节&#xff0c;降低噪音等。以下是一些常见的图像ISP算法&#xff1a; 自动白平衡&#xff08;AWB&#xff09;&#xff1a; 调…

地线与接地螺丝_电气接地的规范要求及接地的各项参数,收藏!

申请加入微信群&#xff1a;加微信好友&#xff0c;diangong1968申请格式&#xff1a;城市-公司简称(电气工程师职称)点此去资料库下载本篇资料为了主要目的是保护人身和设备的安全&#xff0c;减少公司电气事故发生&#xff0c;控制公司人员和财产不受损失&#xff0c;所有电气…

html表单提交后显示,javascript – 在表单提交后在页面上显示消息

我有一个包含2个字段的表单(对于此示例),我使用JavaScript验证,如果字段包含数据,则表单将在用户单击“提交”按钮时提交.我在表单标签中使用iframe将输出发送到同一页面.我想做的是在表单下面显示一条消息,说“感谢您的提交”.我很难想出这个部分.function SubmitRentalForm()…

ai怎么渐变颜色_Ai渐变插画怎么丰富细节

此次教程只需小伙伴对AI软件有基本的操作了解就可以完成&#xff0c;易上手容易理解。止疼药瓶子1.新建画布800X600&#xff0c;绘制止疼药瓶子轮廓用矩形工具(W)绘制止疼药瓶子轮廓&#xff0c;圆角处用直接选择工具(A)选择矩形2个锚点&#xff0c;拉成自己想要的圆角。2.给止…

axure8.0发布html,Axure 8.0 beta最后一批新增和改进功能的介绍

之前一直想翻译Axure官方博客的这篇介绍&#xff0c;但一直没抽出时间&#xff0c;今天偶然发现ShunzUX翻译了这篇文章。阅读后觉得翻译得很准确&#xff0c;特别转来分享给大家。特别是On-Premises Axure Share&#xff0c;我之前都是翻译成『本地部署Axure Share』&#xff0…