css实现自适应居中弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:css实现自适应居中弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: "Arial"; } body { display: flex; justify-content: center; align-items: center; background: #e8fffb; } button { transition: all ease 0.25s; } button:active { transform: scale(0.9); box-shadow: none; } button:focus { outline: 2px solid #00000080; } .button-modal { cursor: pointer; min-width: 200px; display: flex; justify-content: left; align-items: center; position: relative; border: none; border-radius: 8px; outline: none; color: #fff; background: #20332f; padding: 0; box-shadow: 0 4px 8px -4px #1b594e80; transition: all ease 0.5s; overflow: hidden; } .button-modal:hover .icon { width: 100%; } .button-modal:hover .text { right: -100%; } .button-modal .icon { width: 64px; padding: 1em; background: #00000080; transition: all ease 0.75s; } .button-modal .icon svg { animation: click ease-in 1.5s 0.25s infinite; } .button-modal .text { position: absolute; right: 0; padding: 0 1em; transition: all ease 1s; } .modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #00000040; display: none; animation: fade ease-out 0.25s forwards; z-index: 10; } .modal[data-active=true] { display: block; } .modal[data-active=true] ._main { animation: growing ease 0.25s; } .modal ._main { max-width: 400px; width: 100%; height: 400px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; padding: 1em; color: #fff; background: #20332f; box-shadow: 0 0px 8px #00000020; overflow: hidden; z-index: 11; } .modal ._main ._container { height: 100%; display: flex; flex-direction: column; } .modal ._main ._container hr { width: 100%; border-color: #00000040; } .modal ._main ._container ._title { text-align: center; } .modal ._main ._container ._content { color: #ccc; overflow: auto; } .modal ._main ._container ._footer { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; margin-top: auto; } .modal ._main ._container ._footer .close-modal { cursor: pointer; border: none; border-radius: 6px; outline: none; padding: 0.5em 1em; color: #fff; background: #f05; } @media screen and (max-width: 768px) { .modal ._main { width: 95%; height: 95%; } } @keyframes click { 0%, 100% { transform: scale(1); } 20%, 60% { transform: scale(1.25); } 40%, 80% { transform: rotate(0.9); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes growing { from { transform: translate(-50%, -50%) scale(0.9); } to { t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0