跷跷板文字动画

Seesaw 动画是一种动画，可以应用于网站的各种组件，如文本、卡片甚至按钮。但是，它主要用于文本动画。就文本动画而言，这是一个相对较新的动画。

方法：方法很简单，我们将以固定的角度顺序旋转文本。对于本文，我们将使用 5, 0, -5 序列作为角度。

HTML 代码：在本节中，我们将文本包裹在

标签中。

HTML

  

    

  

    
GeeksforGeeks

  

CSS 代码：

• 第 1 步：为 body 元素应用背景。
• 第 2 步：将文本与“中心”对齐并进行一些基本的样式设置，例如使用“字体大小”。
• 第 3 步：使用名为 animate 的标识符的动画属性。
• 第 4 步：使用关键帧为文本设置动画。对方法中讨论的角度使用相同的顺序。

注意：不要增加超过 10 的角度。您可以添加一些“文本阴影”，使此动画具有 3D 外观。

完整代码：是以上两段代码的组合。

HTML

  

    
    

  

    
GeeksforGeeks

  

输出：