css制作动态超链接

动态超链接基础样式

为超链接添加基础样式，确保在不同状态下有明确的视觉反馈：

a {
  color: #3498db;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 4px;
}

悬停效果增强

鼠标悬停时通过颜色变化和下划线动画增强交互感：

a:hover {
  color: #2980b9;
  background-color: #f8f9fa;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

点击状态反馈

使用:active伪类实现点击时的即时反馈：

a:active {
  transform: scale(0.98);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

焦点状态可访问性

为键盘导航用户添加明显的焦点样式：

a:focus {
  outline: 2px solid #2ecc71;
  outline-offset: 2px;
}

动画下划线效果

创建从左向右展开的下划线动画：

a.underline-animate {
  position: relative;
}

a.underline-animate::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease;
}

a.underline-animate:hover::after {
  width: 100%;
}

3D悬浮效果

通过阴影和变形创建立体悬浮效果：

a.three-d {
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: perspective(500px) translateZ(0);
  transition: transform 0.3s, box-shadow 0.3s;
}

a.three-d:hover {
  transform: perspective(500px) translateZ(20px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

图标动态变化

链接文本与图标的组合动画：

a.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

a.icon-link svg {
  transition: transform 0.3s ease;
}

a.icon-link:hover svg {
  transform: translateX(3px);
}