📌  相关文章
📜  如何使用 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

    

输出：