遮罩层从中间展开的css
导读:遮罩层从中间展开的效果在许多网站上都可以看到,它的实现主要是通过CSS,接下来我将给大家介绍如何实现它。.mask {display: none;position: fixed;z-index: 999;top: 0;left: 0;wid...
遮罩层从中间展开的效果在许多网站上都可以看到,它的实现主要是通过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核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 遮罩层从中间展开的css
本文地址: https://pptw.com/jishu/397622.html