- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章有意思!CSS 文字装饰还能这样玩~由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
在 CSS 中,文字算是我们天天会打交道的一大类了,有了文字,则必不可少一些文字装饰.
本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis,在最后,还会讲解使用 background 模拟文字下划线的一些有趣的动效.
。
text-decoration 意为文字装饰,在很早的规范 CSS Level 2 (Revision 1) -- text-decoration[1] 就已经存在了。譬如我们非常熟知的下划线 text-decoration: underline.
image 。
而到了比较新的 CSS Text Decoration Module Level 3 - text-decoration[2],text-decoration 得到了比较大的丰富更新,演化出了:
如今,text-decoration 是上述 4 个属性的的缩写.
其中:
这里有张非常好的图,帮助大家快速理解:
image 。
CodePen Demo -- Text-decoration Demo[3] 。
text-decoration-line 可以同时设置 。
有意思的一点是,text-decoration-line 可以同时设置.
image 。
我们可以得到上中下三条线.
。
text-decoration 的每个值都是可以进行过渡与动画的。合理利用,在一些文本强调的地方,非常有用.
。
配合另外一个属性 text-underline-offset,我们还可以实现如下图这样有趣的效果:
当然,上述的例子中使用了 text-underline-offset 的变换,但是本身 CSS 是不支持 text-underline-offset 的过渡动画的,这里借助了 CSS @property 巧妙的实现了 text-underline-offset 的过渡动画,感兴趣的可以具体了解下 CSS @property 的用法.
CodePen Demo -- 文字下划线过渡动画效果[4] 。
。
text-decoration-color 与 color 是可以不一样的,类似于这样.
。
有意思,经过这样,我们其实得到了一条波浪线.
如果我们把 wavy 下划线加给元素的伪元素,然后在 hover 的时候添加一个动画,让波浪线动起来,得到一个非常好的强调 hover 效果:
我们利用伪元素添加了一段长于文本本身的文本,并且颜色为透明,但是设置了波浪线的颜色,然后 hover 的时候,通过运动伪元素的 translate 进行波浪线的位移,稍微调试一下 translate 的值,可以做到动画的首尾相连,实现运动的波浪线的效果.
CodePen Demo -- text-decoration Demo[5] 。
。
text-emphasis 意为文字强调,是 CSS Text Decoration Module Level 3[6] 才新增的一个属性,用于增强文字强调的效果.
在早些时候,我们如果要强调几个字,可能更多是使用加粗,斜体这种较为常规的文字样式类型:
现在,多了一种有意思的强调方式 -- text-emphasis.
。
text-emphasis 包含了 text-emphasis 和 text-emphasis-position,允许我们在文字上方或者下方添加不同的强调装饰以及不同的颜色.
看个简单的 Demo:
text-emphasis: circle 的效果是给包裹的文字,在其上方,添加 circle 图形,也就是圆圈图形,效果如下:
image 。
当然,默认是黑色的,我们可以在 circle 后面补充颜色:
image 。
除了 circle,还提供非常多种图形可以选择,也可以自定义传入字符,甚至是 emoji 表情:
image 。
。
除了在文字上方,还可以在一定范围内改变强调图形的位置,选择放置在文字的上方或者下方,利用 text-emphasis-position.
这个属性接受上下与左右两个参数:
text-emphasis-position: [ over | under ] && [ right | left ]?
当文字的排版的书写顺序是水平排版布局,类似 writing-mode: lr 时,只需要用到 over、under 即可,当文本的排版布局模式是垂直模式时,类似 writing-mode: vertical-lr,才会用到 right 或者 left 关键字.
image 。
。
除了 CSS 原生提供的 text-decoration 与 text-emphasis 之外,我们还可以通过其他元素模拟一些文字装饰效果.
最常见的莫过于使用 background 模拟下划线了.
看个简单的 DEMO,使用 background 模拟文字的下划线效果:
使用 background 模拟文字的下划线效果,效果图如下:
又或者,使用 background 模拟虚线下划线:
CodePen Demo -- 使用 background 模拟下划线与虚线下划线[7] 。
当然这个是最基础的,巧妙的运用 background 的各种属性,我们实现各种有意思的效果.
巧妙改变 background-size 与 background-position 实现文字 hover 动效 。
这里,通过巧妙改变 background-size 与 background-position 属性,我们可以实现一些非常有意思的文字 hover 效果.
先看这样一个 Demo,核心代码作用于被<p>标签包裹的<a> 标签之上:
我们虽然,设定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff),但是一开始默认它的 background-size: 0 3px,也就是一开始是看不到下划线的,当 hover 的时候,改变 background-size: 100% 3px,这个时候,就会有一个 0 3px 到 100% 3px 的变换,也就是一个从无到有的伸展效果.
看看最后的效果:
由于设定的 background-position 是 0 100%,如果,设定的 background-position 是 100% 100%,我们可以得到一个反向的效果:
再看看效果,你可以对比着上面的动图看看具体的差异点在哪:
CodePen Demo -- background underline animation[8] 。
OK,如果我们使用 background 实现两条重叠的下划线,再利用上述的两个不同的 background-position 值,我们就可以得到一个更有意思的下划线 hover 效果.
CSS 代码示意,注意看两条使用 background 模拟的下划线的 background-position 的值是不一样的:
可以得到这样一种效果,其实每次 hover, 都有两条下划线在移动:
CodePen Demo -- background underline animation[9] 。
。
好了,本文到此结束,介绍了关于文字装饰的一些有意思的属性及动效,希望对你有帮助 :) 。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[10] ,持续更新,欢迎点个 star 订阅收藏.
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知.
参考资料 [1]CSS Level 2 (Revision 1) -- text-decoration: https://www.w3.org/TR/CSS2/text.html#lining-striking-props 。
[2]CSS Text Decoration Module Level 3 - text-decoration: https://drafts.csswg.org/css-text-decor-3/#text-decoration-property 。
[3]CodePen Demo -- Text-decoration Demo: https://codepen.io/Chokcoco/pen/VwmEpqj 。
[4]CodePen Demo -- 文字下划线过渡动画效果: https://codepen.io/Chokcoco/pen/jOymJZR 。
[5]CodePen Demo -- text-decoration Demo: https://codepen.io/Chokcoco/pen/poNQBye 。
[6]CSS Text Decoration Module Level 3: https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property 。
[7]CodePen Demo -- 使用 background 模拟下划线与虚线下划线: https://codepen.io/Chokcoco/pen/YzNQKwm 。
[8]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/QWdgLwp 。
[9]CodePen Demo -- background underline animation: https://codepen.io/Chokcoco/pen/MWJogjQ 。
[10]Github -- iCSS: https://github.com/chokcoco/iCSS 。
原文地址:https://mp.weixin.qq.com/s/yPu7pm2hhfF4nKUubo5wwA 。
最后此篇关于有意思!CSS 文字装饰还能这样玩~的文章就讲到这里了,如果你想了解更多关于有意思!CSS 文字装饰还能这样玩~的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点? .someClass { //apply rules to
在更新我的 css 之前,我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是,如果元素中的某个属性弄乱了特定页面,而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前,我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素),以便它们在桌面计算机的屏幕上显示得很好。然后,如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗?我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页,我可以手动完成。但是有100页。有人有想法吗? 最佳答案 就像有人说的那样,“
当我想从 Styled Components 迁移到 CSS Modules 时,出现了以下问题。 假设我有以下样式组件,它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等?例如,如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮,这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据,然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS?还是在整个 CSS 文件被浏览器下载后才进行解析?不同浏览器的做法有区别吗?我在哪里可以找到这种底层信息? 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱,我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中,我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中,我已经大大减少了它) 当我查看页面的源代码时,我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间,min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途,例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块,所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念,一个是 CSS 定位(静态、相对、绝对、固定),另一个是 CSS Margin,它定义了元素之间的空间。 假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀!