遮罩层从中间展开的css

遮罩层从中间展开的效果在许多网站上都可以看到，它的实现主要是通过CSS，接下来我将给大家介绍如何实现它。

.mask {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background-color: #fff;
    padding: 20px;
}
.show {
    display: block;
    animation: modal-show 0.5s ease-out forwards;
}
.hide {
    animation: modal-hide 0.5s ease-in forwards;
}
@keyframes modal-show {
0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}
100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
}
@keyframes modal-hide {
0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}
}
    

上面的代码包含了三个部分：.mask、.modal和.show。其中，.mask是遮罩层，.modal是弹窗部分，.show表示显示弹窗效果。其中，.modal的transform属性用来控制弹窗从中间展开的效果。

通过CSS实现遮罩层从中间展开的效果，不仅可以增加页面的美观程度，还可以提升用户体验。希望上述代码对大家有所帮助。

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