纯HTML/CSS/JS实现的文字动态效果
文字左右移动是一种常见的网页动画效果，通过CSS的transform属性或JavaScript控制，让文字在水平方向上来回移动，产生动态视觉效果。这种效果常用于标题、广告语或需要突出显示的内容。
本示例使用CSS3的@keyframes规则创建动画，通过transform: translateX()属性改变文字的水平位置，配合animation属性实现持续的左右移动效果。
<!-- HTML结构 -->
<div class="moving-text">Word文字左右移动</div>
<!-- CSS样式 -->
.moving-text {
display: inline-block;
font-size: 2em;
font-weight: bold;
color: #e74c3c;
white-space: nowrap;
animation: moveLeftRight 3s ease-in-out infinite alternate;
}
@keyframes moveLeftRight {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}您可以根据需要调整以下参数：