使用CSS transform和@keyframes可实现文字上下浮动效果。首先通过transform: translateY控制垂直位移，再定义@keyframes动画规则描述0%→50%→100%的移动过程，接着将动画绑定到元素并设置时长、缓动和无限循环，最后应用到inline-block元素上，调整参数可优化视觉效果。
想让文字在页面中产生上下浮动的视觉效果，可以通过 CSS transform 结合 @keyframes 动画来实现。这种效果常用于营造轻盈、动态的界面氛围，比如欢迎标题、提示文字或装饰性文本。
1. 使用 transform: translateY 实现位移
transform: translateY() 可以让元素在Y轴（垂直方向）上移动，是制作浮动动画的核心属性之一。它不会影响其他元素布局，适合做平滑动画。
例如：
.element {
transform: translateY(-10px); /* 向上移动10px */
}
2. 定义 @keyframes 控制动画过程
通过 @keyframes 创建一个关键帧动画，描述文字从一个位置移动到另一个位置，再返回，形成“漂浮”感。
示例代码：
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
这个动画表示：元素从原始位置上浮10像素，再回到原位，循环往复。
立即学习“前端免费学习笔记（深入）”；
3. 将动画应用到文字元素
把定义好的动画绑定到目标文字上，并设置动画时长、重复方式等参数。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.floating-text {
display: inline-block; /* 必须设置为可变换的块级元素 */
animation: float 2s ease-in-out infinite;
}
说明：
- animation: float 引用上面定义的动画名称
- 2s 表示一次动画持续2秒
- ease-in-out 让动画起止更柔和
- infinite 表示无限循环播放
4. 实际使用示例
HTML结构：
<p class="floating-text">欢迎访问我的网站</p>
加上前面的CSS后，这段文字就会持续轻微上下浮动。
可以调整的关键参数：
- 改变 translateY 的像素值 控制浮动幅度
- 修改 animation-duration 控制快慢
- 使用 animation-delay 错开多个元素的动画时机
- 对不同文字设置不同周期，增强自然感
基本上就这些。不复杂但容易忽略细节，比如要加 display: inline-block 才能让 transform 生效，以及选择合适的缓动函数让动作更像“漂浮”而不是机械运动。试试看吧！
