css3 从下往上出现 |css3从入门到精通pdf

首先，大家需要为展示的元素添加一个类名，例如大家这里添加的是 “reveal-from-bottom”：

.reveal-from-bottom {
opacity: 0;
transform: translateY(25px);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

上面的代码中，大家设置了元素的透明度为 0（opacity: 0），并向上偏移了 25 像素（transform: translateY(25px)），同时设置了过渡效果，让元素显现出来时有个逐渐显示的动画效果。

接下来，大家需要通过 JavaScript 动态地为元素添加一个新的类名，使其显现出来。代码如下：

function reveal() {
var elements = document.getElementsByClassName('reveal-from-bottom');
for (var i = 0; i= 0 && rect.top<= windowHeight);
}
window.addEventListener('scroll', reveal);

上面的代码中，大家首先获取了所有需要实现从下往上出现效果的元素（document.getElementsByClassName(‘reveal-from-bottom’)），并判断元素是否处于可视区域内（isElementInViewport()）。如果元素处于可视区域内，则为元素添加新的类名 “reveal-visible”，否则移除该类名。

最后，大家需要为新添加的类名设置样式，使元素实现动画效果。代码如下：

.reveal-visible {
opacity: 1;
transform: translateY(0);
}

上面的代码中，大家将元素的透明度设为 1（opacity: 1），同时将元素向上偏移量设为 0（transform: translateY(0)），从而实现了元素从下往上逐渐显示出来的效果。

通过上述代码的实现，大家可以简单地使用 CSS3 和 JavaScript 实现从下往上出现的效果，为网页设计增加一些新的元素展示方式。