css 一个文字悬停下划线效果?
效果网址 : https://dzone.com
我看了一下, 这个效果感觉挺简单的, 但是自己试了以下感觉还是挺难的
他们网页用到了 js, 不过我是用 css 实现的
我参照着自己做的代码如下
<span>这是一段测试文字</span><style> span { display: inline-block; } span { transition: 3s; background: linear-gradient(0deg, black, black) no-repeat right bottom / 0 2px; background-size: 0 1px; } span:hover { background-position-x: left; background-size: 100% 1px; }</style>但是效果还有有些诧异, 为了更好看出效果我把过渡时间调整3秒
有没有大佬有好一点的实现方案? 用css或者js都可以
共有2个答案
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>xiahuaxian</title> <style> .title { color: #333; line-height: 2; position: relative; display: inline-block; } .title span { background: linear-gradient(to right, #7e2f2b, #146420) no-repeat right bottom; background-size: 0% 2px; transition: background-size 1s ease; } .title:hover span { background: linear-gradient(to right, #7e2f2b, #146420) no-repeat left bottom; background-size: 100% 2px; } </style></head><body> <h2 class="title"> <span>文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果，文字移入一段文字中下划线从左往右变长，然后鼠标移出又从左往右退出的效果。</span> </h2></body></html>
你的代码已经接近实现所需的效果，但确实有一些问题。首先，你的背景渐变在悬停时是从左到右过渡的，而不是从下向上。其次，背景渐变的大小在悬停时应该增加，以创建下划线的动画效果。
下面是一个使用CSS实现的解决方案，它创建了一个在悬停时从下向上扩展的下划线动画效果：
<!DOCTYPE html><html><head><style> span { position: relative; display: inline-block; } span::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: black; transform: scaleX(0); transition: transform 0.3s ease-in-out; } span:hover::after { transform: scaleX(1); }</style></head><body><span>这是一段测试文字</span></body></html>这个代码片段使用了一个伪元素 ::after 来创建下划线。在悬停时，transform: scaleX(1); 会使下划线从左到右扩展，创建动画效果。transition 属性用于控制动画的速度和缓动函数。
如果你想要更接近 dzone.com 的效果，你可能需要调整动画的速度、颜色和宽度等属性。此外，dzone.com 的效果可能还包含了一些其他的CSS或JavaScript动画，例如文字颜色的变化或阴影效果。
如果你想要使用JavaScript来实现这个效果，你可以使用 requestAnimationFrame 来创建更复杂的动画，或者使用CSS类来动态地改变元素的样式。但是，对于简单的下划线动画效果，CSS通常就足够了。
-
当前的效果是悬停时会有伸长的下划线, 但是会有一个问题, 只能做一行 如果我把p标签结构改成如下 那么如何在悬停时让每一行都出现线条?
-
问题内容： 我试图做一个简单的CSS下拉菜单。当您将鼠标悬停在链接上时，我无法实现下拉子菜单。以下是我的HTML和CSS规则，谢谢。 问题答案： 尝试这个： 问题是您的菜单ul是可见的（始终），但是由于this规则的选择器，所以li里面的li是（始终）不可见。 请记住，visible：hidden隐藏元素，但仍在DOM中占用空间，而display：none隐藏元素并将其从页面元素流中移除 另外，您
-
我在图像画廊遇到了一些麻烦。为了实现翻转效果，我有这个jQuery脚本： 这样做的目的是找到图库，在图库图像周围应用一个包装器，当鼠标悬停在该项目上时，它会变为灰度，并且在现有图库的上方会出现一个标题div（带有.caption类）。该图库由9个缩略图组成，脚本将包装器和标题应用于所有现有的图库项目，但我只在第一个缩略图上获得悬停效果。 这是图库超文本标记语言的示例： 这是我得到的CSS： 知道为
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
问题内容： 可以仅更改文本下面的线条颜色？我想看到类似红色字母的下面有一条蓝线的东西，但是我找不到如何完成它的方法。 问题答案： 您可以通过以下CSS规则作为示例： 如果较旧的浏览器不支持此规则，则可以使用以下解决方案： 用底线设置单词：
-
我在IE上的css悬停有问题。 简化；我基本上有一个容器div，它将在悬停时显示一个小的div，里面有一些标记中选择一个，:hover由于某种原因将不再工作，div将消失。 在chrome/firefox等中尝试此示例以查看所需的结果&然后在IE11中再试一次以查看问题所在。 null null