📜  跷跷板文字动画

📅  最后修改于: 2021-08-31 02:29:16             🧑  作者: Mango

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

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

HTML 代码:在本节中,我们将文本包裹在

标签中。

HTML


  

    SeeSaw Text Animation

  

    

GeeksforGeeks

  


HTML


  

    SeeSaw Text Animation
    

  

    

GeeksforGeeks

  


CSS 代码:

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

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


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

HTML



  

    SeeSaw Text Animation
    

  

    

GeeksforGeeks

  

输出: