CSS文字浮动与透明度过渡效果实现

：

浮动的文字

2. 初始样式设置

给文字设置默认状态：稍微向下偏移，并降低透明度，为后续“浮起”做准备。

.float-text {
  display: inline-block;
  opacity: 0.6;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

• display: inline-block：确保 transform 生效（块级或行内块元素更稳妥）
• transform: translateY(10px)：文字初始位置下移 10px
• opacity: 0.6：初始半透明
• transition: all 0.4s ease：所有属性变化都用 0.4 秒缓动动画

3. 悬停状态：触发浮动与变清晰

当鼠标移上时，让文字回到正常位置并变为完全不透明：

.float-text:hover {
  opacity: 1;
  transform: translateY(0);
}

• 透明度从 0.6 过渡到 1，变得清晰
• 位移从 10px 上移到 0，产生“浮起”动画
• transition 自动作用，无需 JavaScript

4. 可选增强：添加轻微弹性效果

如果想让动画更有质感，可以换用更生动的缓动函数：

.float-text {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

• cubic-bezier(0.25, 0.8, 0.25, 1) 模拟轻盈弹跳感
• 也可拆分 transition，为不同属性设置不同时间

基本上就这些。只要掌握 transform 控制位置、opacity 控制透明、transition 定义过渡方式，就能轻松做出文字“缓缓浮出”的视觉效果，适合用在按钮、标题或引导文案中，提升页面交互细腻度。