CSS文本阴影 text-shadow 悬停效果详解


Posted in HTML / CSS onMay 25, 2022

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上并不会为这些文本制作任何文本阴影效果。

text-shadow 没有文字阴影

通过以下的gif图中的鼠标悬停效果,相信你能理解使用 text-shadow 却为什么没有阴影。

CSS文本阴影 text-shadow 悬停效果详解

看到此图你的第一感觉是不是复制了一份文本,比如创建伪元素,设置 content: 'text',然后为其设置单独的动画。但是本文完全使用text-shadow 实现,接下来将为大家展开说明四种悬停动画的实现方式。

text-shadow 语法

text-shadow为文字添加阴影,可以为文字添加多个阴影,添加多个时阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

text-shadow: h-shadow v-shadow blur color;
参数 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

悬停效果#1

CSS文本阴影 text-shadow 悬停效果详解

CSS代码如下,我们将文本实际的颜色设置透明(color: #0000);然后通过text-shadow创建两个阴影,可选参数blur不设置,这样我们就得到了一份清晰的阴影,通过设置不同的颜色和垂直的数值即可产生炫酷的效果。

.hover-1 {
  line-height: 1.2em;
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 1.2em #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 -1.2em #000, 
    0 0 #1095c1;
}

如下图所示,红色虚线区域是我们页面可视区。通过设置overflow: hidden,重复的文本也就看不见了,在悬停过程中增加transition过渡时间,看起来就像是两个文本在交替显示,这就是本文示例中的主要技巧。

CSS文本阴影 text-shadow 悬停效果详解

接下来可以继续优化我们的CSS代码,如上面代码所示,我们多次使用了1.2em来定义了阴影的高度及移动的偏移量,通过CSS var() 自定义属性值优化后的代码如下:

.hover-1 {
  --h: 1.2em;
 
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 var(--h) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;
}

这样还是不够简洁,还可以通过calc()继续优化:

.hover-1 {
  --h: 1.2em;   
 
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  --_t: var(--h);
}

悬停效果#2

CSS文本阴影 text-shadow 悬停效果详解

这个动画主要用到了两个属性,text-shadow和background,text-shadow仍然是设置两个图层,但是这次只需要移动下面的一个,在移动的过程中将上面的颜色设置为透明。同时增加一个background-size修改背景色。

.hover-2 {
  /* the height */
  --h: 1.2em;
 
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t,var(--h)) #fff,
    0 0 var(--_c, #000);
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% var(--_d, 0) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_d: 100%;
  --_t: 0;
  --_c: #0000;
}

以上我们通过结合CSStext-shadow和background属性创建了悬停效果,但是我们还能继续使用CSS变量来优化代码,最终只需要一个CSS自定义属性变量即可。

.hover-2 {
  /* the height */
  --h: 1.2em;
 
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_i, var(--h)) #fff,
    0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_i: 0;
}

悬停效果#3

CSS文本阴影 text-shadow 悬停效果详解

这个效果是基于本文第一个动画效果增加了一个前置动画效果。经过最终优化后也只需控制一个CSS自定义变量即可。

.hover-3 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;
 
  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--h) * var(--_i, 0)) var(--c), 
    0 calc(var(--h) * (1 - var(--_i, 0))) #fff;
  background: 
    linear-gradient(var(--c) 0 0) no-repeat
    calc(200% - var(--_i, 0) * 100%) 100% / 200% calc(100% * var(--_i, 0) + .08em);
  transition: .3s calc(var(--_i, 0) * .3s), background-position .3s calc(.3s - calc(var(--_i, 0) * .3s));
}
.hover-3:hover {
  --_i: 1;
}

悬停效果#4

CSS文本阴影 text-shadow 悬停效果详解

这个悬停效果是基于第二种效果的改进版本,这里新用到了clip-path,我们使用inset(0 0 0 0)类似于overflow: hidden我们所看到的只是实际文本。在悬停时,我们使用等于高度的负值更新第三个值(表示底部偏移)以显示放置在底部的文本层。因为我们需要先运行clip-path动画,然后再运行其他所有内容,所以我们在悬停时为所有属性添加延迟,除了clip-path

transition: 0.4s 0.4s, clip-path 0.4s;

在鼠标移出时,我们做相反的事情:

transition: 0.4s, clip-path 0.4s 0.4s;

最后的完整代码

.hover-4 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;
  
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  box-shadow: 0 var(--_t, var(--h)) var(--c);
  clip-path: inset(0 0 0 0);
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
  transition: 0.4s, clip-path 0.4s 0.4s;
}
.hover-4:hover {
  --_t: 0;
  --_c: #0000;
  clip-path: inset(0 0 calc(-1 * var(--h)) 0);
  transition: 0.4s 0.4s, clip-path 0.4s;
}

最后

如上的几个例子都只用到了一个元素和CSS实现了几种复杂的悬停效果,不需要用到其他的元素及伪元素。基于以上的动画可以发现我们可以结合不同的动画组成更复杂的动画效果,且相对不需要很大的成本。

到此这篇关于CSS文本阴影 text-shadow 悬停效果详解的文章就介绍到这了!

 

Tags in this post...

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
jquery提示 "object expected"的解决方法
2009/12/13 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
导师推荐信范文
2014/05/09 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
初三语文教学反思
2016/03/03 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle