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+浏览器查阅,你将会看到下面这样的效果:
将这个创意放到文本下划线中也是可以的,只不过需要借助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;
}
}
效果如下:
使用SVG实现自定义下划线效果
使用clip-path给文本添加下划线效果,可以帮助我们实现很多具有创意的效果,还可以配合CSS的animation来实现带有动画效果的下划线。其实,除了上面提到的方案之外,我们还可以在background-image中使用SVG给文本添加很多与众不同的下划线效果。比如:
上面的示例中引用像下面这样的一个使用SVG绘制的线条:
.st0{fill:#f3bc34}
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...相关推荐
- 聊聊 CSS 中的布局模式
本文来自作者 大漠 在 GitChat 上分享 「聊聊 CSS 中的布局模式」,「阅读原文」查看交流实录. 「文末高能」 编辑 | 哈比 一.聊聊 CSS 中的布局模式 在大家的印象中,CSS 非常的 ...
- 聊聊CSS中的布局模式
聊聊CSS中的布局模式 在大家的印象中,CSS非常的简单,在此我想再强调一下,虽然CSS简单,但并不代表容易.随着Web技术的发展飞快,CSS经过二十多年的发展,其变化也是非常的大.CSS涵盖的技术点 ...
- 两端文字对齐css,css两端对齐怎么设置,css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
- html 下拉框设置名称,html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- 请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用?...
请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用? .x-column-tree .x-tree-node { zoom:0; } .x-column-tr ...
- CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现 首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
- excel表格下拉箭头_Excel 2013中缺少下拉箭头
excel表格下拉箭头 Excel 2013中缺少下拉箭头 (Missing Drop Down Arrows in Excel 2013) You can create drop down list ...
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
最新文章
- 修改mysql用户名密码
- DPOS机制会比POW机制表现更好吗?
- vs转eclipse之工具快速上手篇
- Android Mvp 架构
- mybatis自我总结
- 魅族Android10内测招募答案,10款机型升级Android 10!魅族Flyme即日起内测招募
- kotlin学习笔记——sqlite(anko)
- MacOS中Dock栏的设置和使用技巧,新手必看
- linux 网络dma驱动,S3C2410的Linux下DMA驱动程序开发
- 深度学习(机器学习)模型压缩开源库整理
- Paw —— 比Postman更舒服的API利器
- 又一个手机圈大佬确认离职!网友:圈内再无万瓷王
- JPA的继承 OOD和关系数据库的 纽带
- js 链接websocket马上断开_SpringBoot+WebSocket实现简单的数据推送
- 树莓派2 利用网卡进行无线网破解
- 【《系统集成项目管理工程师》必备100题】
- springboot 集成 grpc 和 protobuf(二) | 在实际项目中使用 grpc 和 protobuf
- DECOUPLED WEIGHT DECAY REGULARIZATION
- 绝对值c语言不用函数,C语言 STM32 求绝对值函数
- PPT动画制作选美大赛
热门文章
- @ImportResource()注解的使用
- Java 解决跨域问题
- Windows之node.js安装
- 关于request.getRequestDispatcher()的两个方法
- python使用loaddata_Python中LOADDATAINFILE语句导入数据(txt)进入MySQL的一些注意事项...
- arguments 类数组
- 怎么在linux上修改mysql端口映射_如何在Linux中更改默认的MySQL / MariaDB端口
- swfupload 实例 php,文件上传之SWFUpload插件(代码)
- Java面试日常总结大杂烩
- docker 容器之间通信_四、Docker 网络原理、分类及容器互联配置