[分享]css3怎么让文字滑入

在CSS3中，可以通过使用transition属性和transform属性来实现文字的滑入效果。

/* 定义初始状态 */
.slide-in{
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%);
}

/* 定义目标状态 */
.slide-in.active{
  transform: translateX(0);
} 

在HTML中，给文本添加slide-in类名，然后使用JavaScript动态地给元素添加active类名，即可触发文字从左侧滑入的动画效果。

const text = document.querySelector('.slide-in');

function slideIn() {
  text.classList.add('active');
}

text.addEventListener('load', slideIn); 

在上述代码中，通过给文本元素添加active类名触发动画效果。通过监听元素的load事件，当页面加载时执行动画。

通过上述方法，可以快速地实现文本的滑入效果，增加网页的动态性和吸引力，提升用户体验。