使用CSS3写一个下划线跟随动画菜单的动画效果

为了创建一个下划线跟随动画菜单的动画效果，你可以使用CSS3的transition和transform属性。以下是一个简单的示例，说明如何实现这种效果：

1. HTML结构：

<div class="menu">
    <a href="#" class="menu-item">Home</a>
    <a href="#" class="menu-item">About</a>
    <a href="#" class="menu-item">Services</a>
    <a href="#" class="menu-item">Contact</a>
    <div class="underline"></div>
</div>

2. CSS样式和动画：

.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 20px;
    background-color: #f5f5f5;
}

.menu-item {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    z-index: 1;
    position: relative;
}

.underline {
    height: 3px;
    width: 0;
    background-color: #3498db;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s ease, transform 0.3s ease;
    transform-origin: left;
}

.menu:hover .underline {
    width: 100%;
    transform: scaleX(0);
    transition: transform 0s ease, width 0s ease 0.3s;
}

.menu-item:hover ~ .underline {
    transform: scaleX(1);
    width: calc(25% - 40px); /* Adjust based on number of items and padding */
    transition: transform 0.3s ease, width 0.3s ease;
}

.menu-item:nth-child(1):hover ~ .underline {
    left: 0;
}

.menu-item:nth-child(2):hover ~ .underline {
    left: calc(25% - 20px); /* Adjust based on width and padding */
}

.menu-item:nth-child(3):hover ~ .underline {
    left: calc(50% - 20px); /* Adjust based on width and padding */
}

.menu-item:nth-child(4):hover ~ .underline {
    left: calc(75% - 20px); /* Adjust based on width and padding */
}

注意：这个示例假设菜单项是均匀分布的，并且每个菜单项占据容器宽度的25%。你可能需要根据实际的菜单项数量、宽度和填充来调整.underline的left属性和宽度。

此外，这种方法的灵活性有限，特别是当菜单项不是均匀分布或动态生成时。对于更复杂的场景，你可能需要使用JavaScript或考虑其他CSS技巧。