HTML+CSS实现艺术字体效果

2023-10-31 04:17| 来源: 网络整理| 查看: 265

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情

前言

今天我们用HTML和CSS制作一个艺术体的效果。

实现原理如下：

利用 h1 元素、 h1::before 和 h1::after 两个伪元素实现三层字体的嵌套。使用 text-stroke 实现文本描边效果。最后使用 z-index 属性设置上述三个元素的堆叠顺序。实现

HTML 代码如下：

Identity V 第五人格

CSS 代码如下：

html,body{ margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1C1C2A; font-size: 16px; z-index: -9; } .content{ width: 606px; height: 360px; filter: grayscale(80%); background-size: cover; z-index: -3; position: relative; user-select: none; -webkit-user-select: none; } h1{ margin: 0; font-size: 4rem; color: transparent; background: linear-gradient(to right, #fff, #BF391B, #0D0D0D); -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; position: relative; letter-spacing: 0.4rem; font-style: italic; } h1::before, h1::after{ content: attr(data-text); position: absolute; top: 0; left: 0; color: transparent; -webkit-text-stroke: 12px #000; z-index: -1; } h1::after{ -webkit-text-stroke: 17px #fff; z-index: -2; } h1:nth-child(2){ margin-top: -12px; font-size: 1.5rem; } .content:hover{ filter: none; }

text-stroke 属性是向内填充，设置的像素如果很大，就会把字给挡住，具体请参考文本描边。

letter-spacing 属性可增加或减少字符间的空白（字符间距）具体请参考百度。

实现效果如下：

效果看起来不错，但是字体的效果不够 "艺术"，我们可以在 Google Fonts 中找一下你想要的字体，进不去的小伙伴，懂得都懂哈😄 ~~

👉 Google Fonts 使用教程

Google Fonts 使用教程：

找到想要的字体类型，点进去后，点击右边的 + select this style。

之后点击右上角的 View selected families 图标，复制里面的 link 和 font-family 即可。

新增HTML代码如下：

新增 CSS 代码如下：

h1{ /* ...之前代码 */ font-family: 'Nosifer', cursive; }

最终实现效果如下：

👉 演示的源代码在这里 CodePen 链接。

总结

以上就是本次分享的全部内容~~

如果觉得文章写得不错，对你有所启发的，请不要吝啬点个赞和关注并在评论区留下你宝贵的意见哦~~😃

【本文地址】

公司简介

联系我们