使用纯 CSS 在文本内波动

Wave inside Text 是最酷的文本效果之一，用于网站中的文本装饰。这个动画是一个非凡的插图，展示了吸引你眼球的文本中的波浪。此效果可用于在文本、UI、文本上创建水波效果。

方法：方法是使用@keyframes 将动画放在第二个孩子上，这里我们通过h5:nth-child(2)定位身体的第二个孩子并将动画放入其中，现在对于类似波浪的动画，我们需要使用CSS 的 clip-path 属性，现在通过这个属性我们为波状结构塑造多边形路径。现在让我们了解 CSS 的一些基本概念，例如 @keyframes、n-th child 属性和 clip-path 属性：

• nth-child 属性： CSS 中的 :nth-child() 选择器用于根据元素在一组兄弟元素中的位置来匹配元素。
• @keyframes： @keyframes 属性用于使用 CSS 设置动画，并提供将动画时间划分为部分/速率的选项，并播放为整个动画期间的那部分确定的动画。
• clip-path 属性： CSS 的clip-path 属性用于将图片的特定片段切割成片段内的图片显示，片段外的部分图片不显示的程度。

下面是上述方法的实现：

HTML

  

    
  
    

  

    
GeeksForGeeks
    
GeeksForGeeks

  

输出：