css中怎么让文字移动动

如果你想要让你的网站更加动态，一个不错的方法就是让文字动起来。CSS提供了多种方式来实现这个目的，接下来我们就来学习一下。

/* 让文字循环滚动 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

/* 让文字在hover时动起来 */
.hover-animate {
  transition: all 0.2s ease-in-out;
}
.hover-animate:hover {
  transform: translateX(10px);
}

/* 让文字跳动 */
.jump-animate {
  animation: jump 1s infinite;
}
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 让文字旋转 */
.rotate-animate {
  animation: rotate 2s linear infinite;
  display: inline-block;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

以上是让文字动起来的常用css代码，使用起来非常简单。试着给你的网站添加一些动态效果，能够更好地吸引用户的注意力。