CSS如何添加revealtrans动画效果7769

动画效果示例

第一步：添加CSS样式

在样式表中添加以下CSS代码：

 .revealtrans { position:relative; overflow:hidden; } .revealtrans p { position:absolute; top:0; left:0; height:100%; width:100%; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } .revealtrans p.top { top:-100%; } .revealtrans p.bottom { bottom:-100%; } .revealtrans p.left { left:-100%; } .revealtrans p.right { right:-100%; } 
 
第二步：添加HTML结构
 
在HTML文件中添加这样的结构：
 
 <div class="revealtrans"> <p class="top">This is the top paragraph.</p> <p class="bottom">This is the bottom paragraph.</p> <p class="left">This is the left paragraph.</p> <p class="right">This is the right paragraph.</p> </div> 
 
第三步：JavaScript实现动画效果
 
在JavaScript中使用以下代码来添加动画效果：
 
 function revealtrans() { var elements = document.getElementsByClassName('revealtrans')[0].getElementsByTagName('p'); for (var i = 0; i < elements.length; i++) { elements[i].style.opacity = 0; elements[i].classList.remove('top', 'bottom', 'left', 'right'); switch (i) { case 0: elements[i].classList.add('top'); break; case 1: elements[i].classList.add('bottom'); break; case 2: elements[i].classList.add('left'); break; case 3: elements[i].classList.add('right'); break; } } elements[0].style.opacity = 1; var current = 0; var interval = setInterval(function() { current++; if (current >= elements.length) { clearInterval(interval); return; } elements[current-1].style.opacity = 0; elements[current].style.opacity = 1; }, 2000); } revealtrans();