css3文字浮动

CSS3文字浮动是一种让文字或者图片在页面上漂浮起来的效果，这种效果能够增加页面的视觉吸引力。

请看以下的CSS代码：

.float-text {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}

这段代码有两部分，第一部分是选择器 .float-text，表示我们要对哪些元素进行浮动效果的设置。第二部分是CSS3动画，包含了关键帧 @keyframes 和浮动效果的细节，它由三个阶段组成：0%、50% 和 100%。

在0%时，我们要把浮动文字向下移动10像素，以便在后面的动画中上下漂浮。

在50%时，我们要把浮动文字向上移动10像素，以便完成“上下浮动”的动作。

最后，再通过100%时的变化，来让浮动文字继续上下漂浮。

浮动文字这种效果，仅仅需要少量的CSS代码，就能够让你的页面看起来更具有活力和动感。可以尝试在你自己的网站中应用这种效果，看看效果如何。