css3弹出特效

CSS3弹出特效是指通过CSS3动画效果实现弹出效果的一种方式，它可以使页面更加生动有趣。以下是一个实例演示：

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background-color: #fff;
    z-index: 999;
    opacity: 0;
    transition: all 0.3s;
}
.popup.show {
    opacity: 1;
}
.popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0;
    z-index: 998;
    transition: opacity 0.3s;
}
.mask.show {
    opacity: 1;
}
点击这里弹出框关闭
这是一个弹出框
function showPopup() {
    document.querySelector('.popup').classList.add('show');
    document.querySelector('.mask').classList.add('show');
}
function hidePopup() {
    document.querySelector('.popup').classList.remove('show');
    document.querySelector('.mask').classList.remove('show');
}
    

在这个实例中，先定义了一个.popup弹出框和一个.mask遮罩层，它们的初始状态都是隐藏的。当点击点击这里弹出框时，就会触发showPopup()函数，这个函数会把.popup和.mask这两个元素都加上show的class，使它们展现出来。此时，通过CSS3 transition属性，实现了一个渐变动画效果。当我们点击关闭按钮或遮罩层时，触发hidePopup()函数，在这个函数中，我们把.popup和.mask这两个元素的show类都去掉，又通过transition属性实现了一个渐变隐藏动画效果。

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