如何将带动画的HTML/CSS文本元素设置为可点击链接？

问题说明 #

HTML/CSS经验有限，仅能基于已有代码修改，不擅长从零编写。现有一段带动画的文本代码，想把整个动画区域设为可点击链接，尝试添加a:link和href后未成功，不清楚该在哪添加链接信息。

解决方案 #

直接把整个动画文本的外层容器换成<a>标签，同时保留原有的样式类，就能让整个区域变成可点击链接，具体修改如下：

• 替换外层容器：把原来的<div class="word">改成<a href="你的目标链接地址" class="word">，将跳转地址填入href属性中
• 调整链接样式：在.word的CSS规则里添加text-decoration: none;，去掉链接默认的下划线，避免破坏原有样式

修改后的完整代码 #

<html>
<head>
    <style type="text/css">
.word{
 display: flex;
 font-size: 40px;
 font-family: "Bebas Neue";
 font-weight: bold;
 color: black;
 padding-top: 20px;
 padding-bottom: 10px;
 margin: 5%;
 text-decoration: none; /* 新增：移除链接默认下划线 */
}

.l-anim{
  transform: translateY(50%);
  width: 100%
}

.c-anim{
transform: translateY(-50%);
  width: 100%
}

.ed-anim{
transform: translateY(50%) translateX(-10%) scale(.70);
width: 100%
}

.word:hover .l-anim, .word:hover .c-anim, .word:hover .ed-anim{
  transform: translateY(0%);
  transition: 1s all;
}

.word:not(:hover) .l-anim{
  transform: translateY(50%);
  transition: 1s all;
}

.word:not(:hover)  .c-anim{
  transform: translateY(-50%);
  transition: 1s all;
}

.word:not(:hover) .ed-anim{
  transform: translateY(-50%);
  transition: 1s all;
}
    </style>
</head>


<a href="https://你的目标链接地址.com" class="word"> <!-- 将外层div替换为a标签并添加href -->
  <div>SE</div>
  <div class="anim-wrapper">
    <div class="l-anim">L</div>
  </div>
  <div>E</div>
  <div class="anim-wrapper">
    <div class="c-anim">C</div>
  </div>
  <div>T</div>
  <div class="anim-wrapper">
    <div class="ed-anim">ED</div>
  </div>
</a>

</html>

关键说明 #

• 由于<a>标签被设置了display: flex，它会和原来的div容器一样成为flex布局容器，整个动画区域都会变成可点击的链接
• 添加text-decoration: none是为了移除链接默认下划线，保持原有的文本样式
• 将代码中的https://你的目标链接地址.com替换为你实际需要跳转的URL即可

内容的提问来源于stack exchange，提问作者Joshua Echevarria