关于css:CSS-文本阴影-textshadow-悬停效果

本文将专一于应用 CSS text-shadow 属性来实现乏味的鼠标悬停成果，然而实际上并不会为这些文本制作任何文本暗影成果。

text-shadow 没有文字暗影？

通过以下的 gif 图中的鼠标悬停成果，置信你能了解应用 text-shadow 却为什么没有暗影。

看到此图你的第一感觉是不是复制了一份文本，比方创立伪元素，设置 content: 'text'，而后为其设置独自的动画。然而本文齐全应用text-shadow 实现，接下来将为大家开展阐明四种悬停动画的实现形式。

text-shadow 语法

text-shadow为文字增加暗影，能够为文字增加多个暗影，增加多个时暗影值之间用逗号隔开。每个暗影值由元素在 X 和 Y 方向的偏移量、含糊半径和色彩值组成。

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

悬停成果 #1

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 代码，如下面代码所示，咱们屡次应用了 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和 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 自定义变量即可。

.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 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 实现了几种简单的悬停成果，不须要用到其余的元素及伪元素。基于以上的动画能够发现咱们能够联合不同的动画组成更简单的动画成果，且绝对不须要很大的老本。

看完感觉有用，记得点赞珍藏起来吧，说不定哪天就用上啦~

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）