js文字淡入淡出特效

<div id="text">Hello, World!</div>

#text {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

function fadeIn(element) {
  element.style.opacity = 1;
}

function fadeOut(element) {
  element.style.opacity = 0;
}

// 示例调用
const textElement = document.getElementById('text');
fadeIn(textElement); // 淡入
setTimeout(() => fadeOut(textElement), 3000); // 3秒后淡出

function fadeIn(element) {
  let opacity = 0;
  const timer = setInterval(() => {
    if (opacity >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = opacity;
    opacity += 0.1;
  }, 50);
}

#text {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out; /* Safari 和 Chrome */
  -moz-transition: opacity 1s ease-in-out; /* Firefox */
  -o-transition: opacity 1s ease-in-out; /* Opera */
  transition: opacity 1s ease-in-out;
}