css3 显示隐藏运动动画效果

CSS3 中提供了丰富的动画效果和特性，其中显示/隐藏运动动画效果是很常见的一种。下面我们将介绍如何使用 CSS3 实现这种效果。

// HTML 代码div class="box">
    p>
    显示/隐藏运动动画效果/p>
    button class="btn">
    点击切换/button>
    /div>
// CSS 代码.box {
    width: 200px;
    height: 200px;
    background-color: #3CCEE8;
    position: relative;
}
.box p {
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
     // 初始状态为隐藏transition: all 0.5s ease;
}
.show {
    opacity: 1;
 // 显示状态}
    // JS 代码var btn = document.querySelector('.btn');
    var p = document.querySelector('p');
btn.onclick = function() {
    p.classList.toggle('show');
 // 切换类名}
    ;
    

使用以上代码，当点击按钮时，p 元素会从一开始隐藏变为显示，并且会以动画的形式展现出来，具体效果如下：

显示/隐藏运动动画效果

总结一下，通过 CSS3 的 opacity 属性动态控制元素的透明度，我们可以实现简单的显示/隐藏运动动画效果，而通过 transition 属性，又可以使这种效果更加平滑自然。JavaScript 则是用来切换类名，从而触发动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！