今天来实现下面图片的效果
文章来源地址https://www.toymoban.com/news/detail-493181.html
要实现这种效果只需要使用到background这个属性了。
首先创建有个div 输入一段文字
然后在设置background属性
这时候页面就会出现这样子 
文字背景填充满了，无法跟动态图一样那么细。别急，css里还有有个background-size属性，设置一下就可以了
然后把100%改成0 再给div添加：hover鼠标滑过长度成100%，加个过渡动画。
效果图：
到这里发现为什么跟第一张效果图不一样啊，不应该是进去从上面出来然后再下面消失吗。
这时候就需要再：hover属性里面加入
background-position-x: left;
就可以了
就跟效果图一模一样了。文章来源：https://www.toymoban.com/news/detail-493181.html
到了这里，关于使用CSS实现鼠标悬浮标题出现动态下划线的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
