纯css实现的一个带遮罩的模态弹出层弹框效果代码
代码语言:html
所属分类:弹出层
代码描述:纯css实现的一个带遮罩的模态弹出层弹框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> * { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: 'Raleway', sans-serif; font-size: 16px; } @media screen and (max-width: 768px) { html, body { font-size: 12px; } } .container { background-color: #9191E9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100vw; height: 100vh; } .button { text-decoration: none; font-size: .875rem; font-weight: 300; text-transform: uppercase; display: inline-block; border-radius: 1.5rem; background-color: #fff; color: #9191E9; padding: 1rem 2rem; } .popup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; width: 100vw; height: 100vh; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 2; visibility: hidden; opacity: 0; overflow: hiden; -webkit-transition: .64s ease-in-out; transition: .64s ease-in-out; } .popup-inner { position: relative; bottom: -100vw; right: -100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 800px; max-height: 600px; width: 60%; height: 80%; background-color: #fff; -webkit-transform: rotate(32deg); transform: rotate(32deg); -webkit-transition: .64s ease-in-out; transition: .64s ease-in-out; } .popup__photo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 40%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0