CSS实现向下滑动遮挡背景的DIV块：代码详解及示例
<p>{"title":"CSS实现向下滑动遮挡背景的DIV块：代码详解及示例","description":"使用CSS的position和z-index属性实现一个从上向下滑动的DIV块，遮挡背景。本文提供详细的代码示例，包括HTML、CSS和JavaScript，并解释实现原理。","keywords":"CSS, DIV, 遮挡背景, 滑动效果, position, z-index, transition, JavaScript, 代码示例","content":"<div class="background"></div><div class="overlay"></div><style>.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0f0f0; /* 背景颜色 <em>/ z-index: 1; }.overlay { position: absolute; top: -100%; /</em> 初始位置在视口之外 <em>/ left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /</em> 遮挡层的颜色和透明度 <em>/ z-index: 2; transition: top 0.5s ease; /</em> 使用过渡效果实现滑动动画 <em>/ }.overlay.active { top: 0; /</em> 滑动到顶部 */ }</style><script>const overlay = document.querySelector('.overlay'); overlay.addEventListener('click', function() { overlay.classList.toggle('active'); });</script>这段代码中，<code>.background</code>代表背景层，<code>.overlay</code>代表遮挡层。通过给遮挡层添加<code>active</code>类，可以触发滑动效果。点击遮挡层时，JavaScript代码会监听点击事件，并通过切换<code>active</code>类来触发滑动效果。"}</p>
原文地址: https://www.cveoy.top/t/topic/pBVE 著作权归作者所有。请勿转载和采集!