css 动画滑动 |css的最高选择器是

/* CSS代码 */
.slide-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide-in.show {
opacity: 1;
transform: translateY(0);
}

以上是CSS代码，大家来一一解析一下：

• 首先定义一个名为slide-in的class，其中设定元素的初始状态opacity为0（即完全透明不可见）和transform为translateY(30px)（即在Y轴上向下偏移30像素）。
• 然后为该class设定一个过渡动画效果，即当class被应用时，元素的opacity和transform属性会在0.5秒钟内进行渐变（即从0到1和从向下偏移30像素到0），过渡效果采用ease函数（即开始和结束时稍微慢一点，但在过程中速度较快）。
• 最后定义一个名为show的class（用来触发动画效果），其中元素的opacity为1（即完全不透明可见）和transform为translateY(0)（即恢复原始位置）。

接下来，大家来看一下如何将CSS动画效果应用到HTML元素上：

/* HTML代码 */
/* JavaScript代码 */
const boxes = document.querySelectorAll(".box");
function slideIn() {
boxes.forEach(box =>{
const boxTop = box.offsetTop;
const windowHeight = window.innerHeight;
if (boxTop< windowHeight) {
box.classList.add("show");
}
});
}
window.addEventListener("scroll", slideIn);

以上是HTML和JavaScript代码，大家来一一解析一下：

• 首先在HTML页面中定义一个class为container的div容器，其中包含两个class为box和slide-in的元素（即两个需要应用动画的元素）。
• 然后在JavaScript代码中使用querySelectorAll方法获取所有class为box的元素，并定义一个名为slideIn的函数。
• 在slideIn函数中使用forEach遍历所有box元素，获取每个box元素的offsetTop和窗口高度windowHeight，判断元素距离顶部的距离是否小于窗口高度，如果是，则为该元素添加class名为show（即触发动画效果）。
• 最后在window对象上添加scroll事件，并将slideIn函数添加为事件处理程序，以便在页面滚动时触发动画效果。

以上就是使用CSS和JavaScript实现动画滑动的整个过程，代码简单易懂，逻辑清晰明了，希望对大家有所帮助。