纯CSS实现炫酷文本阴影效果

如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。

基于以上动图可以分析出以下是本次实现的主要几个功能点:

  • 文本有多个颜色的阴影的效果
  • 文本有空心镂空的效果
  • 鼠标悬停时文本回到正常效果
  • 鼠标悬停时英文字体的粗细有变化

实现过程

多层颜色阴影

文字的阴影用text-shadow实现,但是一般情况下我们都是只控制一个颜色,多个颜色应该怎么控制呢?其实该属性支持添加多个文本阴影层,以创建特殊的阴影效果。每个层各自控制水平偏移量、垂直偏移量、模糊半径和颜色定义。这里的多个颜色的阴影代码如下:

text-shadow: 10px 10px 0px #07bccc,15px 15px 0px #e601c0,20px 20px 0px #e9019a,25px 25px 0px #f40468,45px 45px 10px #482896;

文本镂空效果

文字的镂空效果是用-webkit-text-stroke这个属性实现,-webkit-text-stroke 是一个用于在网页中设置文本描边的 CSS 属性。它是 WebKit 浏览器引擎(如Chrome、Safari)的专有属性。

这个属性允许开发者为文字添加一条描边线,使文字看起来更加突出和醒目。通过指定描边的宽度和颜色,可以控制描边的外观。

语法如下:

-webkit-text-stroke: <width> <color>;

<width> 指定描边的宽度,可以是正值或负值(负值用于创建内部描边)。<color> 指定描边的颜色值。

请看以下在浏览器中调试-webkit-text-stroke的效果。

文本粗细变化

文本粗细变化是基于 font-variation-settings 属性完成,这个属性用于设置字体的变体属性。可以用来定义 OpenType 字体的变化轴(variation axis)和对应的值(value),以便控制字体的外观和样式。

OpenType 字体是一种可缩放字型的字体类型,支持多种语言和高级排版功能的字体文件格式,它提供了更大的灵活性和一致性,使得设计师和排版师能够创建出更具创意和专业的排版作品。

它允许开发者通过调整字体的参数来获得不同的字形效果。这些参数可以包括字重(weight)、宽度(width)、斜度(slant)、粗细(contrast)等。

以下是 font-variation-settings 属性的语法:

font-variation-settings: <axis-name> <axis-value>;
  • <axis-name> 指定字体变体的轴名称,如“wght”表示字重,可以根据具体字体的支持情况选择对应的轴。
  • <axis-value> 指定字体变体轴的值,可以是一个数值或一个具体的字符串。

例如,要设置字体的字重为 700,可以使用以下代码:

font-variation-settings: "wght" 700;

需要注意的是,font-variation-settings 属性需要字体本身支持相应的变体轴和值。由于不同浏览器支持的字体和变体轴可能有所不同,本文的示例本文可以看到中文字体是没有发生变化的,就是因为这里使用的字体不支持中文。

有兴趣的可以看这篇文章详细介绍:CSS小技巧使用 font-variation 让文字起飞

这里的示例效果增加的代码如下:

font-variation-settings: "wght" 900, "ital" 1;

动画实现

接下来完成鼠标悬停时的动画效果,基于以上完成的 font-variation-settingstext-shadow,当鼠标悬停时设置文本阴影为none移除文本阴影,消除多层阴影效果,同时设置字体的粗细为100(正常)和字体样式设置为非斜体,从而恢复默认设置的font-variation-settings属性值。这里因为设置了字体的粗细为100所以字体的镂空效果也会消失,但这前提是使用的字体支持font-variation-settings属性。代码如下:

main:hover {font-variation-settings: "wght" 100, "ital" 0;text-shadow: none;
}

为了在悬停期间所应用的更改具有平滑的过渡效果,还增加了transition: all 0.5s过渡设置,持续时间为0.5秒。

优化版本

上面的版本是默认有阴影,鼠标悬停后恢复正常,以下将顺序调整为默认正常,鼠标悬停后显示阴影效果,并调整了阴影的颜色。

文本阴影代码如下:

text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #01e647,20px 20px 0px #e9b701,25px 25px 0px #f40468,45px 45px 10px #482896;

在线预览

码上掘金地址:
https://code.juejin.cn/pen/7300188992132743220

最后

本文解析了通过 CSS text-shadow实现多层文字阴影效果,并使用 font-variation-settings-webkit-text-stroke 实现鼠标悬停时文本粗细以及文本阴影的变化,有兴趣的朋友可以尝试看看~

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

参考

原文动画参考:https://codepen.io/gayane-gasparyan/pen/vYmYMeV

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

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

相关文章

【软件工程师从0到1】- Java面向对象基础 (知识汇总)

前言 介绍&#xff1a;大家好啊&#xff0c;我是hitzaki辰。 社区&#xff1a;&#xff08;完全免费、欢迎加入&#xff09;日常打卡、学习交流、资源共享的知识星球。 自媒体&#xff1a;我会在b站/抖音更新视频讲解 或 一些纯技术外的分享&#xff0c;账号同名&#xff1a;hi…

QTcpSocket发送结构体的做法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> QTcpSocket发送结构体其实很简单:使用QByteArray类对象进行封装发送&#xff0c;示例代码如下&#xff1a; /* 消息结构体 */ struct stMsg {int m_A…

【bugfix】安装 flash-attn 报错

目录 1. 报错信息 2. 解决方法 安装 flash attention 报错 1. 报错信息 Building wheel for flash-attn (setup.py) ... error error: subprocess-exited-with-error 或者 Building wheel for flash-attn (pyproject.toml) did not run successfully 甚至更多问题。 2. 解…

CLIP浅谈

CLIP论文地址&#xff1a;Learning Transferable Visual Models From Natural Language Supervision CLIP代码地址&#xff1a;https://github.com/openai/CLIP 简介 CLIP是OpenAI在2021年2月发表的一篇文章&#xff0c;它的主要贡献有以下2点&#xff1a; 1&#xff09;将图…

4、FFmpeg命令行操作7

转封装(1) 保持编码格式&#xff1a; ffmpeg -i test.mp4 -vcodec copy -acodec copy test_copy.ts ffmpeg -i test.mp4 -codec copy test_copy2.ts 改变编码格式&#xff1a; ffmpeg -i test.mp4 -vcodec libx265 -acodec libmp3lame out_h265_mp3.mkv …

无损音频播放软件 Colibri mac中文版特点介绍

Colibri for mac是一款轻量级的音频播放器软件。它具有简洁的界面设计和快速启动速度&#xff0c;能够提供流畅的音频播放体验。Colibri支持多种常见的音频格式&#xff0c;包括MP3、FLAC、ALAC、AAC等。它还提供了一些实用的功能&#xff0c;如音频均衡器、音频增益控制、播放…

酒糟废水处理设备有哪些

酒糟废水处理设备有以下几种&#xff1a; 格栅&#xff1a;用于拦截大颗粒悬浮物&#xff0c;以保护后续处理设备。调节池&#xff1a;用于调节水质和水量&#xff0c;使废水在处理过程中保持稳定。混凝反应池&#xff1a;通过添加混凝剂&#xff0c;使废水中的小颗粒悬浮物凝…

小程序开通电子发票

总目录 文章目录 总目录前言结语 前言 随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器学习&#xff0c;本文就介绍了机器学习的基础内容。 首先登录商户号&#xff1a;https://pay.weixin.qq.com/index.php/core/home/lo…

探索SPI:深入理解原理、源码与应用场景

文章目录 一、初步认识1、概念2、工作原理3、作用场景 二、源码分析1、ServiceLoader结构2、相关字段3、核心方法 三、案例connector连接器小案例1、新建SPI项目2、创建扩展实现项目1-MongoDB3、创建扩展实现项目2-Oracle4、测试 Spring应用1、创建study工程2、创建forlan-test…

uniapp Android如何授权打开系统蓝牙Bluetooth?

uniapp Android如何授权打开系统蓝牙&#xff1f; 使用uniapp开发蓝牙项目过程中&#xff0c;涉及到检测手机系统蓝牙是否打开功能&#xff0c;这里介绍Android&#xff0c;iOS暂时没有找到优方法。朋友们如果有好的方案&#xff0c;欢迎评论分享~ 文章目录 uniapp Android如何…

AWS云服务器EC2实例实现ByConity快速部署

1. 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在全球范围内都备受推崇&#xff0c;被众多业内人士誉为“云计算服务的行业标准”。在国内&#xff0c;亚马逊AWS也以其卓越的性能和服务满足了众多用户的需求&#xff0c;拥有着较高的市场份额和竞争力。…

华为笔记本MateBook D 14 2021款锐龙版R7集显非触屏(NbM-WFP9)原装出厂Windows10-20H2系统

链接&#xff1a;https://pan.baidu.com/s/13Kyy95GME-asli4woNN_ww?pwdbqa8 提取码&#xff1a;bqa8 HUAWEI华为MateBookD14原厂Win10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、华为电脑管家等预装程序

网络营销人员提问常用的ChatGPT通用提示词模板

如何制定有效的网络营销策略和计划&#xff1f; 如何运用社交媒体进行网络营销和推广&#xff1f; 网络营销中的搜索引擎优化&#xff08;SEO&#xff09;有哪些技巧和最佳实践&#xff1f; 如何运用电子邮件营销和网络广告来推广产品或服务&#xff1f; 网络营销中的数据分…

05_SHELL编程之文本处理工具SED

typora-root-url: pictures课程目标 掌握sed的基本语法结构 熟悉sed常用的命令&#xff0c;如打印p&#xff0c;删除d&#xff0c;插入i等 Windows&#xff1a;​ Linux&#xff1a; vim vi gedit nano emacs 一、sed介绍 1. sed的工作流程 首先sed把当前正在处理的行保存…

el-table中el-popover失效问题

场景&#xff1a;先有一个数据表格&#xff0c;右侧操作栏为固定列&#xff0c;另外有一个字段使用了el-popover来点击弹出框来修改值&#xff0c;发现不好用&#xff0c;点击后无法显示弹出框&#xff0c;但当没有操作栏权限时却意外的生效了。 这种问题真是不常见&#xff0…

设置指定时间之前的时间不可选

1、el-date-picker设置今天之前的日期不可选 <el-date-picker style"width: 100%" type"date" v-model"form.resetDate" align"right" :value-format"yyyy-MM-dd" placeholder"选择调整日期":disabled"t…

场景交互与场景漫游-路径漫游(7)

路径漫游 按照指定的路径进行漫游对一个演示是非常重要的。在osgViewer中&#xff0c;当第一次按下小写字母“z”时&#xff0c;开始记录动画路径;待动画录制完毕&#xff0c;按下大写字母“Z”&#xff0c;保存动画路径文件;使用osgViewer读取该动画路径文件时&#xff0c;会回…

什么时候用@MapperScan 注解?

hello,我是小索奇&#xff0c;给大家讲解一下MapperScan注解的用法。 MapperScan 注解是 MyBatis 框架中的一个注解&#xff0c;它的主要作用是扫描指定包路径下的 Mapper 接口&#xff0c;将其注册为 Spring 的 Bean。这样&#xff0c;在使用 MyBatis 进行数据库操作时&#…

基于STC12C5A60S2系列1T 8051单片的IIC总线器件模数芯片PCF8591实现模数转换应用

基于STC12C5A60S2系列1T 8051单片的IIC总线器件模数芯片PCF8591实现模数转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍IIC总线器件模数芯片PCF8591介绍通过I…

Linux基础指令

Linux基础指令 一、学习Linux指令的目标二、Linux基础命令 一、学习Linux指令的目标 1.学习各种指令&#xff0c;按照我说的做就可以&#xff0c;不需要将来背。 2.穿插很多的Linux相关的基本概念&#xff08;系统层面&#xff09;需要理解需要记忆的 我们在敲各种指令&#…