HTML怎么设置文本飞入效果？transform位移动画-html教程-PHP中文网

HTML怎么设置文本飞入效果？transform位移动画

星降

发布： 2025-06-27 18:26:02

原创

542人浏览过

要调整html文本飞入方向，1. 修改.fly-in-text的初始left值和@keyframes中from与to的left值；2. 也可使用right或bottom属性配合相应动画设置。例如从右侧飞入时，将left改为right并设置为-100%，动画从right:-100%到right:0；从底部飞入则用bottom属性。实现多个文本依次飞入需3. 使用animation-delay属性，并通过:nth-child()选择器为每个元素设置不同延迟时间。让文本飞入后停顿再消失则4. 在@keyframes中划分阶段控制飞入、保持、消失过程，并结合animation-fill-mode:forwards保持最终状态。

HTML怎么设置文本飞入效果？transform位移动画

设置HTML文本飞入效果，核心在于使用CSS的transform属性和animation动画，通过位移将文本从屏幕外移动到目标位置。

<!DOCTYPE html>
<html>
<head>
<title>文本飞入效果</title>
<style>
.fly-in-text {
  position: relative; /* 确保动画基于元素自身位置 */
  left: -100%; /* 初始位置：屏幕左侧外部 */
  animation: flyIn 1s forwards; /* 动画名称、时长、动画方向 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

@keyframes flyIn {
  from {
    left: -100%; /* 初始位置：屏幕左侧外部 */
    opacity: 0; /* 初始透明度 */
  }
  to {
    left: 0; /* 最终位置：元素正常位置 */
    opacity: 1; /* 最终透明度 */
  }
}
</style>
</head>
<body>

<div class="fly-in-text">这是一段会飞入的文本。</div>

</body>
</html>

登录后复制

如何调整飞入方向？

调整飞入方向，只需要修改.fly-in-text的初始left值和@keyframes flyIn中from和to的left值。例如，要让文本从右侧飞入，可以将.fly-in-text的left设置为100%，@keyframes flyIn的from的left设置为100%，to的left设置为0。也可以使用right属性来实现，但需要注意元素本身的定位方式。

.fly-in-text {
  position: relative;
  right: -100%; /* 从右侧飞入 */
  animation: flyInRight 1s forwards;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes flyInRight {
  from {
    right: -100%;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}

登录后复制

或者，如果你想让文本从底部飞入，可以使用top或bottom属性：

立即学习“前端免费学习笔记（深入）”；

.fly-in-text {
  position: relative;
  bottom: -100%; /* 从底部飞入 */
  animation: flyInBottom 1s forwards;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes flyInBottom {
  from {
    bottom: -100%;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

登录后复制

如何实现多个文本依次飞入的效果？

要实现多个文本依次飞入的效果，可以使用CSS的animation-delay属性。为每个文本元素设置不同的延迟时间，就可以让它们按照顺序依次出现。

<!DOCTYPE html>
<html>
<head>
<title>依次飞入的文本效果</title>
<style>
.fly-in-text {
  position: relative;
  left: -100%;
  animation: flyIn 1s forwards;
  white-space: nowrap;
  overflow: hidden;
}

.fly-in-text:nth-child(1) {
  animation-delay: 0s;
}

.fly-in-text:nth-child(2) {
  animation-delay: 0.5s;
}

.fly-in-text:nth-child(3) {
  animation-delay: 1s;
}

@keyframes flyIn {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
</style>
</head>
<body>

<div class="fly-in-text">文本 1</div>
<div class="fly-in-text">文本 2</div>
<div class="fly-in-text">文本 3</div>

</body>
</html>

登录后复制

注意，这里使用了:nth-child()选择器来为每个文本元素设置不同的animation-delay。你可以根据需要调整延迟时间。

如何让文本飞入后停顿一段时间再消失？

可以通过修改@keyframes规则和添加animation-fill-mode属性来实现。animation-fill-mode: forwards; 保证动画结束后，元素保持动画的最终状态。

.fly-in-text {
  position: relative;
  left: -100%;
  animation: flyInAndOut 3s forwards; /* 动画总时长3秒 */
  white-space: nowrap;
  overflow: hidden;
}

@keyframes flyInAndOut {
  0% {
    left: -100%;
    opacity: 0;
  }
  33% { /* 动画前1秒飞入 */
    left: 0;
    opacity: 1;
  }
  66% { /* 动画中间1秒保持 */
    left: 0;
    opacity: 1;
  }
  100% { /* 动画最后1秒消失并回到初始位置 */
    left: 100%; /* 或者设置 opacity: 0; 来实现淡出效果 */
    opacity: 0;
  }
}

登录后复制

在这个例子中，动画总时长为3秒。前1秒文本飞入，中间1秒文本保持在屏幕上，最后1秒文本消失并飞出屏幕。可以通过调整@keyframes中的百分比来控制每个阶段的时长。如果想要淡出效果，可以将最后一个关键帧的left属性保持不变，只修改opacity属性为0。

以上就是HTML怎么设置文本飞入效果？transform位移动画的详细内容，更多请关注php中文网其它相关文章！