通过以下GIF图中的鼠标悬停效果，我相信您可以理解为什么没有文本阴影的阴影。
看到这张图片您的第一个感觉是复制文本，例如创建伪元素，设置，然后为其设置单独的动画。但是，本文完全用于实现它。接下来，我们将解释四个悬架动画的实现。
文本阴影将阴影添加到文本中，您可以在文本中添加多个阴影，并在多个阴影之间的阴影值之间添加一个逗号。每个阴影值由偏移，模糊半径和x和y方向元素的颜色值组成。
水平阴影的位置是必不可少的。呈负阴影。V阴影是必要的。垂直阴影的位置。播放负值。Blur可选。可选距离距离距离。彩色可选。阴影的颜色。
CSS代码如下。我们将文本的实际颜色设置为透明（颜色：＃0000）;然后，通过创建两个阴影，未设置可选的参数模糊，以便我们获得清晰的阴影，设置不同的颜色和不同的颜色，垂直值可以产生很酷的效果。
如下图所示，红色虚线是我们的页面视觉区域。通过设置，重复的文本是看不见的。增加了悬挂过程中的过渡时间，看起来两次文本交替显示。这是本文示例中的主要技术。
接下来，我们可以继续优化我们的CSS代码。如上所述，我们使用1.2EM来定义阴影的高度和动作的偏移。
这仍然不够简单，您可以继续通过calc（）进行优化：
该动画主要使用两个属性。文字阴影和背景。文本阴影仍然设置两层，但是这次只需要移动以下颜色即可将上述颜色设置为移动过程中的透明。在同一时间，添加背景大小以修改背景颜色。
以上，我们通过组合CSSTTEXT阴影和背景属性来创建悬挂效果，但是我们可以继续使用CSS变量来优化代码。最后，只能使用一个CSS自定义属性变量。
此效果基于本文的第一个动画效应，以增加前动画效果。最终优化后，您只需要控制CSS自定义变量即可。
这种悬浮效应基于第二效果的改进版本。这里是新的。我们使用我们看到的仅是实际文本。在悬停时间，我们使用等于高值的负值来更新第三个值（表示底部偏移量）以显示放置在底部的文本层。我们需要先运行动画，然后运行所有其他内容，在徘徊时，我们将延迟添加到所有属性，除外：除：
当鼠标移出时，我们会做相反的事情：
最终完整代码
以上示例仅使用一个元素和CSS来达到多种复杂的悬架效果，并且不需要使用其他元素和伪元素。基于上述动画，我们可以发现我们可以将不同的动画结合在一起以形成更复杂的动画效果，而且我们不需要大量费用。
阅读后，我感到有用，记住收集它，也许有一天我会使用它?
关注前端开发，共享前端与技术干货，公共帐户：Nancheng Dajian（ID：Nanchengfe）
原始：https：//juejin.cn/post/7097508415525617677