HTML CSS 3D文字效果
3D文本动画效果是通过text-shadow属性设计的。应用在多个文本阴影上，主要是因为使用了3D效果，外观看起来好像仅应用单个文本阴影，对于单词中存在的所有字母来说，它都是相同的。但是对于3D效果，希望每个字母和每个角度（基本上是X和Y坐标以及模糊半径）的阴影厚度都不同。

HTML代码

将<h1>标记与要对其应用3D效果的单词一起使用。

  1. <!DOCTYPE html> 
  2. <html lang="en">
  4. <head> 
  5.     <meta charset="UTF-8" /> 
  6.     <meta name="viewport" content= 
  7.         "width=device-width, initial-scale=1.0" /> 
  8.     <title>3D Text Effect</title> 
  9. </head>
  11. <body> 
  12.     <h1>GeeksforGeeks</h1> 
  13. </body>
  15. </html>

CSS代码

  • 步骤1：要做的第一件事是将

    元素对齐到居中并提供主体bcakground。

  • 步骤2：现在，将过渡应用于h1元素。持续时间可以根据需要进行调整。
  • 步骤3：现在在h1元素上应用文本阴影。在开头的方法中已经说明了应用多个文本阴影的概念。

提示：此处将效果仅在鼠标悬停时可见，但是如果希望该效果始终可见，需要删除悬停选择器。

  1. <style> 
  2.     body { 
  3.         background: green; 
  4.     }
  6.     h1 { 
  7.         margin: 300px auto; 
  8.         text-align: center; 
  9.         color: white; 
  10.         font-size: 8em; 
  11.         transition: 0.5s; 
  12.         font-family: Arial, Helvetica, sans-serif; 
  13.     }
  15.     h1:hover { 
  16.         text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 
  17.                      0 3px 0 #ccc, 0 4px 0 #ccc, 
  18.                      0 5px 0 #ccc, 0 6px 0 #ccc, 
  19.                      0 7px 0 #ccc, 0 8px 0 #ccc, 
  20.                      0 9px 0 #ccc, 0 10px 0 #ccc, 
  21.                      0 11px 0 #ccc, 0 12px 0 #ccc, 
  22.                      0 20px 30px rgba(0, 0, 0, 0.5); 
  23.     } 
  24. </style>

完整代码

在这部分中，将结合以上两个部分，以在鼠标悬停时创建3D文本动画效果。

  1. <!DOCTYPE html> 
  2. <html lang="en">
  4. <head> 
  5.     <meta charset="UTF-8" /> 
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  7.     <title>3D Text Effect</title> 
  8.     <style> 
  9.         body { 
  10.             background: green; 
  11.         }
  13.         h1 { 
  14.             margin: 300px auto; 
  15.             text-align: center; 
  16.             color: white; 
  17.             font-size: 8em; 
  18.             transition: 0.5s; 
  19.             font-family: Arial, Helvetica, sans-serif; 
  20.         }
  22.         h1:hover { 
  23.             text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 
  24.                 0 3px 0 #ccc, 0 4px 0 #ccc, 
  25.                 0 5px 0 #ccc, 0 6px 0 #ccc, 
  26.                 0 7px 0 #ccc, 0 8px 0 #ccc, 
  27.                 0 9px 0 #ccc, 0 10px 0 #ccc, 
  28.                 0 11px 0 #ccc, 0 12px 0 #ccc, 
  29.                 0 20px 30px rgba(0, 0, 0, 0.5); 
  30.         } 
  31. </style> 
  32. </head> 
  33. <body> 
  34.     <h1>GeeksforGeeks</h1> 
  35. </body> 
  36. </html>

实现效果

3D文字效果的实现 - 图1