首页js写一个字体下划线过渡动画

js写一个字体下划线过渡动画

时间: 2024-05-02 19:20:34 浏览: 10

好的，我会为您提供js编写字体下划线过渡动画的代码。以下是代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体下划线过渡动画</title> <style> body{ background-color: #f1f1f1; font-family: Arial, Helvetica, sans-serif; } #text{ font-size: 50px; text-align: center; position: relative; display: inline-block; } #underline{ height: 4px; background-color: #4CAF50; position: absolute; bottom: 0; left: 0; width: 0%; transition: width 0.5s ease-in-out; } #text:hover #underline{ width: 100%; } </style> </head> <body> <div id="text"> 字体下划线过渡动画 <div id="underline"></div> </div> </body> </html> ``` 这段代码会在文本被鼠标悬停时触发下划线宽度从0%到100%的过渡动画。您可以根据需要进行修改。希望对您有所帮助。