📌  相关文章
📜  如何使用 HTML 和 CSS 在悬停时创建幽灵文本动画?

📅  最后修改于: 2021-11-08 02:24:08             🧑  作者: Mango

Ghost Text Animation 可用于为您的网站提供一个怪异的标题或副标题,使用一些简单的 HTML 和 CSS 可以轻松创建这种效果。

HTML 代码:在本节中,我们有一个ul标签,它由一些显示一些文本的li标签组成。




  
  
  Ghost Text


  
        
  • G
  •     
  • H
  •     
  • O
  •     
  • S
  •     
  • T
  •   

CSS 代码:在本节中,我们使用一些基本的 CSS 属性设计ul元素,然后为了创建重影动画,我们将首先使用过滤器属性,该属性用于为各个元素提供一些视觉效果,然后使用模糊( )函数为文本提供模糊效果,此外,我们将使用nth-child()选择器为文本提供一些传输延迟


最终代码:是以上两个代码段的组合。




  
  
  Ghost Text



  
        
  • G
  •     
  • H
  •     
  • O
  •     
  • S
  •     
  • T
  •   

输出: