jsp-选中展示动画上划线-CSDN博客

本文链接：https://blog.csdn.net/qq_41722217/article/details/129690094

该代码示例展示了如何使用CSS实现一种链接hover效果，当鼠标悬停在链接上时，下划线从左至右滑动展开，给用户带来动态交互体验。主要涉及到CSS的伪元素、变换（transform）和过渡（transition）属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现效果

请添加图片描述

2.代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>采购公告布局</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.8.0-rc.9/css/layui.css">
 
</head>

<style type="text/css">
.center-to-head{
    position:relative;
    width: 60px;
    padding: 15px;
    float: left;
    border-top:1.2px solid #e8e8e8;
    border-right:1.2px solid #e8e8e8;
    border-bottom:1.2px solid #e8e8e8;
  
  }
  .center-to-head::after{
    left:0;
    content:'';
    display:block;
    /*开始时候下划线的宽度为100%*/
    width:100%;
    height:3px;
    position:absolute;
    top:0px;
    background:#ff8d1a;
    transition:all 0.3s ease-in-out;
    /*通过transform的缩放scale来让初始时x轴为0*/
    transform: scale3d(0,0,0);
    /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
    transform-origin:50% 0;
  }
  .center-to-head:hover::after{
    /*鼠标经过时还原到正常比例*/
    transform:scale3d(1,1,1);
  }
  
</style>


<body>
    <div id="text-title" class="text-title" style="width: 100%;height: 50px;">
        <a href="#xmzy" class="center-to-head ">项目摘要</a>
        <a href="#ggzw" class="center-to-head">公告正文</a>
        <a href="#xmjz" class="center-to-head">项目进展</a>
    </div>
</body>