最近看到一个页面有一个很有趣的动画，就是鼠标移入后，在对应的文字下方会出现下划线的动画效果，当鼠标移除后，下划线动画会消失，于是想了下该如何去实现这个动画效果。
第一个想法是想通过with来做，但是这样会有一个问题，就是文字不是固定的，长度和高度都可能会改变，这样是不行的，于是想了下用背景大小控制。
具体效果如下所示：
代码如下：
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D地图</title> <style> body,html{ margin:0;padding:0;} .box{ width: 250px; margin: 100px auto; } .box span { font-size: 26px; background: linear-gradient(to right, red, yellow) no-repeat right bottom; background-size: 0 3px; transition: background-size 1s; } .box span:hover { font-size: 26px; background-position-x: left; background-size: 100% 3px ; } </style> </head> <body> <div class="box"> <span>你好啊哈哈哈哈哈哈你好撒护肤撒护肤哈哈哈哈哈</span> </body> </html>
