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();