css做div动画显示与隐藏

　　在网页制作中，我们经常需要使用一些动画效果以增强视觉效果和用户体验。其中一种比较常见的动画是用 CSS 来显示和隐藏某个 div。

<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: #f00;
        transition: all .5s; /*添加动画过渡效果*/
    }

    #box.hide {
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
    }
</style> 

　　在上述代码中，我们首先定义了一个 ID 为 box 的 div 元素，并设置了它的宽高和背景颜色。接着在 box 的 CSS 样式中添加了一个 transition 属性，用来产生动画过渡效果。然后我们添加了一个 class 为 hide 的样式，该样式中将 opacity、height、padding 和 margin 等属性都设置为 0，从而实现了隐藏 box 元素的效果。

　　当我们需要显示 box 元素时，只需要通过 JS 或 JQuery 等脚本语言来动态地为 box 元素添加或删除 hide class 即可。例如，在 JQuery 中可以使用以下代码来实现：

$(function () {
    $('#btnShow').click(function () {
        $('#box').removeClass('hide');
    });

    $('#btnHide').click(function () {
        $('#box').addClass('hide');
    });
}); 

　　以上代码通过监听按钮的点击事件来动态地为 box 元素添加或删除 hide class，从而实现了显示和隐藏其效果。

　　总体来说，使用 CSS 来实现 div 元素的动态显示和隐藏是一种通用且简单的方式，适用于各种场景。通过结合 JS 或 JQuery 等脚本语言，可以很方便地实现各种动画效果，提高网页的视觉效果和用户体验。