用js和css实现一行一行文字交替显示

用js和css实现，效果是：有多行文字，一行一行的交替显示，每隔几秒显示一行，循环显示。

代码如下，保存为html即可看到效果：

<!DOCTYPE html>  
<html lang="en">  
<head>  <style>  #textContainer {  overflow: hidden;  }  #textContainer span {  position: absolute;  opacity: 0;  transition: opacity 0.5s ease-in-out;}  #textContainer span.active {  opacity: 1;  }  </style>  
</head>  
<body>  <span id="textContainer">  <span class="active">First line of text</span>  <span>Second line of text</span>  <span>Third line of text</span>  </span>  <script>  let currentIndex = 0;  const spans = document.querySelectorAll('#textContainer span');  const totalSpans = spans.length;  function showNextText() {  spans[currentIndex].classList.remove('active');  currentIndex = (currentIndex + 1) % totalSpans;  spans[currentIndex].classList.add('active');  }  setInterval(showNextText, 5000); </script>  
</body>  
</html>

上面的代码中，用css设定显示效果，用js代码控制每行文字的显示。

如果不想让他人查看js源码，防止别人知道实现原理，可以用JShaman、JS-Obfuscator、JsJiaMi.online等JS代码加密工具对上面的js代码进行加密。

例如：