css3 背景大小background-size属性实现鼠标移入文字下划线动画效果

#麻辣小龙虾#

已于 2023-04-17 16:05:54 修改

阅读量676

点赞数

分类专栏： CSS3 文章标签： css3 动画 css

于 2023-03-23 14:15:10 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/129729840

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最近看到一个页面有一个很有趣的动画，就是鼠标移入后，在对应的文字下方会出现下划线的动画效果，当鼠标移除后，下划线动画会消失，于是想了下该如何去实现这个动画效果。

第一个想法是想通过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>