html中怎么实现元素淡入淡出 opacity过渡教程

<div class="fade-element">
  这是一个需要淡入淡出的元素。
</div>

.fade-element {
  opacity: 0; /* 初始状态：完全透明 */
  transition: opacity 1s ease-in-out; /* opacity属性过渡，持续1秒，缓动函数 */
}

.fade-element.show {
  opacity: 1; /* 最终状态：完全不透明 */
}

const element = document.querySelector('.fade-element');
// 假设在某个事件触发时添加/移除 'show' 类
setTimeout(() => {
  element.classList.add('show'); // 淡入
}, 100); // 延迟100毫秒开始

<div class="fade-element animation-fade">
  这是一个需要淡入淡出的元素。
</div>

.animation-fade {
  animation: fadeInOut 2s ease-in-out infinite alternate; /* 动画名称，持续时间，缓动函数，循环次数，交替方向 */
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

const element = document.querySelector('.fade-element');
let opacity = 0;
const intervalId = setInterval(() => {
  opacity += 0.01;
  element.style.opacity = opacity;
  if (opacity >= 1) {
    clearInterval(intervalId);
  }
}, 10); // 每10毫秒改变一次opacity

<div class="hover-fade">
  鼠标悬停时淡入淡出
</div>

.hover-fade {
  opacity: 0.5; /* 初始透明度 */
  transition: opacity 0.3s ease-in-out;
}

.hover-fade:hover {
  opacity: 1; /* 鼠标悬停时完全不透明 */
}

<div id="fade-in-element">
  页面加载后淡入
</div>

#fade-in-element {
  opacity: 0;
  transition: opacity 1s ease-in;
}

#fade-in-element.loaded {
  opacity: 1;
}

document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('fade-in-element');
  element.classList.add('loaded');
});

.delayed-fade {
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 0.5s; /* 延迟0.5秒开始动画 */
  opacity: 0; /* 初始透明度 */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

<div class="delayed-fade-element">
  延迟淡入元素
</div>

.delayed-fade-element {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.delayed-fade-element.show {
  opacity: 1;
}

const element = document.querySelector('.delayed-fade-element');
setTimeout(() => {
  element.classList.add('show');
}, 500); // 延迟500毫秒后添加 'show' 类