📌  相关文章
📜  如何使用 HTML 和 CSS 在悬停时将文本旋转 360 度?

📅  最后修改于: 2021-08-31 08:11:42             🧑  作者: Mango

文本可以使用基本的 HTML 和 CSS 旋转 360 度,这个动画可以用作网站的标题或副标题,使其看起来更有吸引力。以下部分将指导您如何创建所需的效果。

  • HTML 代码:在本节中,我们将创建一个基本的div元素,其中将包含一些文本
HTML


   

    
    Rotate text 360 degrees
     

   

    
        

GeeksforGeeks

    


css


HTML


   

    
    Rotate text 360 degrees
     


   

    
        

GeeksforGeeks

    


  • CSS代码:在这一部分首先我们将使用基本的CSS属性设计文本,然后我们将使用动画关键帧@ 规则,我们将使用transform属性定期将文本旋转 360 度。

css


最终代码:它是上述两个代码部分的组合。

HTML



   

    
    Rotate text 360 degrees
     


   

    
        

GeeksforGeeks

    

输出: