网站简单文本滑动动画实现方式及行业规范咨询

这类自定义Logo交互动画没有统一的通用处理规范，直接通过HTML+CSS即可实现，不需要引入复杂的JS逻辑，灵活性更高也更适配个人站点的定制需求。

核心实现思路 #

• 结构拆分：将Logo拆分为三个独立元素：左侧文本ben、中间分隔竖线|、右侧文本usted，外层套相对定位的父容器控制整体位置
• 初始状态设置：给左右文本设置初始隐藏状态，左侧文本向左偏移自身宽度、透明度为0，右侧文本向右偏移自身宽度、透明度为0，同时添加过渡动画属性
• 触发逻辑：可以选择页面加载完成后自动触发动画，或者设置为鼠标hover到Header区域时触发，触发时将左右文本的偏移量归0、透明度设为1即可。

参考代码示例 #

<!-- HTML结构 -->
<div class="logo">
  <span class="text left">ben</span>
  <span class="divider">|</span>
  <span class="text right">usted</span>
</div>

/* CSS样式 */
.logo {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  overflow: hidden; /* 隐藏初始状态下偏移出可视区域的文本 */
}
.text {
  transition: all 0.6s ease;
  opacity: 0;
}
.left {
  transform: translateX(-100%);
  margin-right: 4px; /* 调整和分隔线的间距 */
}
.right {
  transform: translateX(100%);
  margin-left: 4px; /* 调整和分隔线的间距 */
}
/* 页面加载触发：页面加载完成后给.logo元素添加active类即可；要hover触发的话把.active换成:hover */
.logo.active .left,
.logo.active .right {
  transform: translateX(0);
  opacity: 1;
}

如果需要实现更细腻的逐字母滑出效果，可以给每个字母单独套标签，给不同字母设置不同的动画延迟，就能实现字母依次出现的递进效果。

内容的提问来源于stack exchange，提问作者Ben Lusted