css div展开动画 |网站文字动画效果css代码

/* 定义 DIV 展开前的状态 */
.anim-div {
height: 0; /* 高度为 0 */
overflow: hidden; /* 隐藏溢出部分 */
transition: all 1s ease-in-out; /* 定义过渡效果 */
}
/* 定义 DIV 展开后的状态 */
.anim-div.show {
height: auto; /* 高度自动 */
transition: all 1s ease-in-out; /* 定义过渡效果 */
}

在上述代码中，大家首先定义了一个 .anim-div 类，这个类表示一个高度为 0，且溢出部分被隐藏的 div 元素。同时，大家设置了 transition 属性，这个属性表示该元素的所有属性改变都会有 1s 的过渡时间，并且过渡效果为 ease-in-out。

接下来，大家定义了另一个 .anim-div.show 类，这个类表示 div 元素展开后的状态。大家设置了 height 属性为 auto，这意味着该元素的高度将自动调整到合适的大小。同时，大家也定义了 transition 属性，表示元素属性的改变同样有 1s 的过渡时间，并且过渡效果为 ease-in-out。

// JavaScript 实现 div 展开效果
document.getElementById("trigger").addEventListener("click", function() {
document.getElementById("anim-div").classList.toggle("show");
});

为了实现点击事件后 div 展开效果，大家需要使用 JavaScript 代码。在上述代码中，大家首先获取了一个 ID 为 trigger 的元素，并使用 addEventListener 方法为其注册了一个点击事件监听。接下来，大家使用了 classList.toggle 方法，实现了 div 元素在 show 和 hide 状态之间的切换。

需要注意的是，该方法在 IE9 及以下版本的浏览器中不支持。这时候，大家可以通过使用 classList.add 和 classList.remove 方法分别添加和移除 show 类名，实现效果上的类似替代。

综上所述，CSS div 展开动画是网页设计中比较实用的元素之一。通过结合 transition，transform 和 JavaScript 代码，大家可以轻松地实现网页内容的动态展示和交互效果，提升用户体验。