实现鼠标悬停父元素时文本下划线动画

本文介绍了如何通过CSS实现鼠标悬停在父元素上时，子元素文本出现下划线动画的效果。核心思路是利用CSS伪元素::before或::after创建一个下划线，并通过transition属性实现动画效果。通过控制伪元素的width和visibility属性，可以在鼠标悬停时动态显示下划线，从而达到美观的视觉效果。

实现原理

该效果的核心在于利用CSS的伪元素（::before 或 ::after）来模拟下划线，并利用 transition 属性来实现动画效果。 默认情况下，伪元素的宽度设置为0，并且隐藏。 当鼠标悬停在父元素上时，伪元素的宽度变为100%，并且显示出来，从而产生下划线动画。

实现步骤

1. HTML 结构：

   首先，需要一个包含文本的 HTML 结构。通常，会将文本包裹在一个 标签或者 标签内，并将其放置在一个父级容器内。例如：

   
     
   
       News
     
   

2. CSS 样式：

   接下来，需要编写 CSS 样式来创建下划线动画。关键步骤如下：

   • 设置父元素样式（可选）： 可以根据需要设置父元素的样式，例如背景颜色、内边距等。

   • 设置文本样式： 设置文本的字体大小、颜色、字体样式等。

     

     Videoleap

     Videoleap是一个一体化的视频编辑平台

     下载

   • 创建伪元素： 使用 ::before 或 ::after 伪元素来创建下划线。设置伪元素的 content 为空字符串，position 为 absolute，并设置 bottom 和 left 属性来定位下划线的位置。设置 background-color 来定义下划线的颜色。

   • 设置初始状态： 设置伪元素的初始宽度为 0，并设置 visibility 为 hidden，使其默认情况下不显示。

   • 添加过渡效果： 使用 transition 属性来为伪元素的宽度和可见性添加过渡效果，使其在鼠标悬停时产生动画效果。

   • 设置悬停状态： 使用 :hover 伪类来设置鼠标悬停时的样式。将伪元素的宽度设置为 100%，并将 visibility 设置为 visible，使其显示出来。

   完整的 CSS 代码如下：

   .newsBox {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: rgba(154, 54, 67, 0.5);
   }
   
   .titleBox {
     margin-left: 20px;
   }
   
     .newsTitle {
       position: relative;
       font-size: 30px;
       color: rgba(255, 255, 255, 0.8);
       font-style: italic;
      }
   
     .newsTitle::before {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: 0;
       left: 0;
       background-color: red;
       visibility: hidden;
       transition: all 0.5s ease-in-out;
      }
   
   .newsBox:hover .newsTitle::before {
      visibility: visible;
      width: 100%;
   }

   或者，如果想悬停在 .titleBox 上触发动画，则修改 CSS 如下：

   .titleBox:hover .newsTitle::before {
      visibility: visible;
      width: 100%;
   }

注意事项

• position: relative： 确保文本元素（例如 或 ）的 position 属性设置为 relative，这样伪元素才能相对于文本元素进行定位。
• transition 属性： transition 属性可以控制动画的速度和效果。可以根据需要调整 transition 的值，例如 transition: width 0.3s ease-in-out;。
• 兼容性： 该方法在现代浏览器中具有良好的兼容性。

总结

通过使用 CSS 伪元素和 transition 属性，可以轻松实现鼠标悬停父元素时文本下划线动画的效果。这种方法简单易懂，并且具有良好的兼容性，可以为网站增加一些交互性和视觉效果。