CSS Text-Shadow Text-shadow 悬停效果

使用 CSS Text-shadow 属性可以实现有趣的鼠标悬停效果，但它不会为文本创建文本阴影效果。

文字-shadow 没有文字阴影？

通过下面GIF中的鼠标悬停效果，相信你能明白为什么使用文本输入时没有阴影。

当你看到这张图的时候，你的第一印象是你复制了一些文字，就像创建了一个伪元素， 内容：'文字'，然后单独设置一个动画它。不过本文完全用文-shadow实现。接下来我们将讲解四种悬停动画的实现。

文本-shadow语法

文本-shadow为文本添加阴影。您可以向文本添加一些阴影。添加多个阴影时，用逗号分隔阴影值。每个阴影值由元素在 X 和 Y 方向上的偏移、模糊半径和颜色值组成。

text-shadow: h-shadow v-shadow blur color;

悬停效果#1

CSS代码如下，我们设置文本当前颜色为透明（颜色：#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，重复的文本将不再可见，而增加悬停过程中的过渡时间将使其看起来像是两个文本交替显示。这是本文示例中的主要技术。

接下来我们可以继续优化我们的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

这个动画主要用到两个属性，text-shadow And background，text-shadow And background、文-shadow 和背景，运动过程中上部颜色过于透明。同时添加背景尺寸来更改背景颜色。

.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代码，优化自定义属性变量即可。

.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自定义变量即可。

.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

此悬停效果是基于第二个效果的改进版本。这里 clip-path 被重用。我们使用 inset(0 0 0 0 ) 类似于 overflow:hidden我们看到的都是实际文本。悬停时，我们将第三个值（表示底部偏移量）更新为等于高度的负值，以在地面上显示文本层。由于我们需要在执行其他操作之前先执行 clip-path 动画，因此我们向除 clip-path 之外的所有属性添加悬停延迟：

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中的一个元素来实现各种复杂的悬停效果，无需使用其他元素和伪元素。基于上面的动画我们可以发现，我们可以将不同的动画组合起来形成更复杂的动画效果，而且不需要太多的成本。