改善排版和吸引更多注意力的最佳方法之一是使用阴影。投阴影主要用于印刷设计，但在网络上也同样有用

在本教程中，我将向您展示如何使用简单的API创建简单的、可配置的动画3D文本效果。我们将使用CSS shadow属性和一点jQuery，通过赋予3D文本深度和逼真的阴影来创建3D文本的错觉。

这很酷的一点是没有图像；一切都是由CSS完成的，这使它变得更好。它也适用于像Internet Explorer这样的旧浏览器。

如何使用它:

1.下载并惰性化dropFont.js在jQuery之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dropFont.js"></script>

2.在文本上初始化插件，并指定阴影偏移：

<h1>jQueryScript!</h1>

$(function(){
  $("h1").dropFont(20);
});

3.将平滑动画应用于放置阴影：

var i = 1;
var dropHeight = 20;
function animateDrop() {
  setTimeout(function() {
    $("h1").dropFont(i);
    i++;
    if (i < dropHeight)
      animateDrop();
  }, 25)
}
animateDrop();

4.设置阴影的颜色：

:root {
  --drop-color: #E572B2;
}

预览截图

jQuery和CSS阴影创建3D文本效果 dropFont