本文将重点介绍如何使用CSStext-shadow属性实现有趣的鼠标悬停效果，但不会实际为这些文本制作任何文本阴影效果。text-shadow没有文字阴影？通过下面gif中的鼠标悬停效果，相信你就能明白为什么使用text-shadow时没有阴影了。看到这张图，你的第一感觉是你是不是把文字复制了一份，比如创建一个伪元素，设置content:'text'，然后为其设置单独的动画。但是这篇文章是完全使用text-shadow实现的，接下来我会讲解四种悬停动画的实现。text-shadow语法text-shadow给文本添加阴影，可以给文本添加多个阴影，添加多个阴影时阴影值用逗号分隔。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。text-shadow:h-shadowv-shadow模糊颜色；参数说明h-shadow是必需的。水平阴影的位置。允许负值。v-shadow是必需的。垂直阴影的位置。允许负值。模糊可选。模糊的距离。颜色是可选的。阴影的颜色。悬停效果#1CSS代码如下，我们将文字的实际颜色设置为透明（颜色：#0000）；然后通过text-shadow创建两个阴影，可选参数blur没有设置，所以我们得到一个清晰的阴影，通过设置不同的颜色和垂直值可以产生很酷的效果。.hover-1{行高：1.2em;颜色：#0000；文字阴影：00#000，01.2em#1095c1；溢出：隐藏；transition:.3s;}.hover-1:hover{text-shadow:0-1.2em#000,00#1095c1;}如下图，红色虚线区域是我们的可见区域页。通过设置overflow:hidden，重复的文字不可见，悬停过程中增加transition过渡时间，看起来两个文字交替显示，这是本文示例中的主要技巧。接下来，我们可以继续优化我们的CSS代码。如上面代码所示，我们多次使用1.2em来定义阴影的高度和移动的偏移量。通过CSSvar()自定义属性值优化后的代码如下：.hover-1{--h:1.2em;行高：var(--h);颜色：#0000；文字阴影：00#000,0var(--h)#1095c1;溢出：隐藏；transition:.3s;}.hover-1:hover{text-shadow:0calc(-1*var(--h))#000,00#1095c1;}这样还是不够简洁，你也可以用calc()继续优化：.hover-1{--h:1.2em;行高：var(--h);颜色：#0000；文本阴影:0calc(-1*var(--_t,0em))#000,0calc(var(--h)-var(--_t,0em))#1095c1;溢出：隐藏；transition:.3s;}.hover-1:hover{--_t:var(--h);}hovereffect#2这个动画主要用到两个属性，text-shadow和background，text-shadow还是设置了两层，不过这次只需要移动最下面的一个，在移动的过程中将上面的颜色设置为透明。同时添加一个background-size来修改背景颜色。.hover-2{/*高度*/--h:1.2em;行高：var(--h);颜色：#0000；文本阴影：0var(--_t,var(--h))#fff,00var(--_c,#000);背景：线性渐变（#1095c100）底部/100%var（--_d，0）不重复；溢出：隐藏；过渡：0.3s;}.hover-2:hover{--_d:100%;--_t:0;--_c:#0000;}上面我们通过结合CSStext-shadow和background属性创建了悬停效果，但是我们还可以继续使用CSS变量来优化代码，最终只需要一个CSS自定义属性变量。.hover-2{/*高度*/--h:1.2em;行高：var(--h);颜色：#0000；文本阴影：0var(--_i,var(--h))#fff,00rgb(000/calc(var(--_i,1)*100%));背景：线性梯度(#1095c100)底部/100%计算(100%-var(--_i,1)*100%)不重复；溢出：隐藏；transition:0.3s;}.hover-2:hover{--_i:0;}Hovereffect#3这个效果是基于文章Ananimationeffect添加了一个pre-animationeffect。最终优化后，只需要控制一个CSS自定义变量即可。.hover-3{/*颜色*/--c:#1095c1;/*高度*/--h:1.2em;行高：var(--h);颜色：#0000；溢出：隐藏；文本阴影：0calc(-1*var(--h)*var(--_i,0))var(--c),0calc(var(--h)*(1-var(--_i,0)))#fff;背景：线性梯度(var(--c)00)无重复计算(200%-var(--_i,0)*100%)100%/200%calc(100%*var(--_i,0)+.08em);过渡：.3scalc(var(--_i,0)*.3s),背景位置.3scalc(.3s-calc(var(--_i,0)*.3s));}.hover-3:hover{--_i:1;}悬停效果#4这个悬停效果是在第二个效果的基础上改进的，这里是新的在clip-path中，我们使用inset(0000)类似溢出：隐藏，我们所看到的只是实际文本。悬停时，我们将第三个值（表示底部偏移量）更新为等于高度的负值，以显示放置在底部的文本层。因为我们需要clip-path动画在其他一切之前运行，所以我们为除clip-path之外的所有属性添加悬停延迟：transition:0.4s0.4s,clip-path0.4s;在mouseout上，我们做相反的事情：transition:0.4s,clip-path0.4s0.4s;完整的代码在end.hover-4{/*颜色*/--c:#1095c1;/*高度*/--h:1.2em;行高：var(--h);颜色：#0000；文本阴影：0var(--_t,var(--h))#fff,00var(--_c,#000);盒子阴影：0var(--_t,var(--h))var(--c);剪辑路径：插图（0000）；背景：线性梯度（var（--c）00）0var（--_t，var（--h））不重复；过渡：0.4s，剪辑路径0.4s0.4s;}.hover-4:hover{--_t:0;--_c:#0000;剪辑路径：插图（00计算（-1*var（--h））0）；transition:0.4s0.4s,clip-path0.4s;}最后几个如上每个例子只用了一个元素和CSS实现了几个复杂的悬停效果，没有使用其他元素和伪元素。基于以上的动画，我们可以发现，我们可以将不同的动画进行组合，形成更复杂的动画效果，而且相对不需要很大的开销。如果看完觉得有用，记得点赞收藏，说不定哪天会用到呢~专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）
