我用了33行纯CSS实现了下划线的交互动画效果
由于原始代码已经是一个完整的解决方案,下面是一个简化的版本,只包含核心CSS代码,并去除了不必要的注释和空行:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 24px;
color: #333;
text-decoration: underline;
cursor: pointer;
transition: color 0.3s, text-decoration 0.3s;
}
.container:hover {
color: #000;
text-decoration: none;
}
这段代码实现了一个文本在鼠标悬停时变黑并且下划线消失的交互效果。通过CSS的transition
属性,实现了颜色和下划线消失的平滑过渡动画。
评论已关闭