css实现漂亮的modal模态弹出层确认框效果代码
代码语言:html
所属分类:弹出层
代码描述:css实现漂亮的modal模态弹出层确认框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> html { box-sizing:border-box } *,*::after,*::before { box-sizing:inherit } *,*:before,*:after { box-sizing:border-box; outline:0 } body { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100vh; background-color:whitesmoke; font-family:"Source Sans Pro",sans-serif; font-size:16px; font-smooth:auto; font-weight:300; line-height:1.5; color:#444; background-image:url("//repo.bfw.wiki/bfwrepo/image/62254197e677b.png"); background-position:center center; background-size:cover } body:before { position:absolute; content:""; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.7); z-index:-1 } p { font-weight:400 } a { text-decoration:none } label { cursor:pointer } .modal-btn { position:relative; display:table-cell; width:100px; height:100px; background-color:#2c3e50; box-shadow:0 0 40px rgba(0,0,0,0.3); border-radius:50%; font-size:36px; color:white; text-align:center; line-height:2.75; transition:box-shadow 250ms ease } .modal-btn:hover { box-shadow:0 0 5px rgba(0,0,0,0.3) } .modal-bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:10; visibility:hidden; transition:background-color 250ms linear } .modal-content { position:absolute; top:50%; left:50%; width:50%; height:auto; margin-top:-18%; margin-left:-25%; padding:30px; background-color:white; border-radius:4px; box-shadow:0 0 50px rgba(0,0,0,0.5); transform:scale(0); transition:transform 250ms ease; visibility:hidden; z-index:20 } .modal-content .close { position:relative; float:right; font-size:18px; transition:transform 500ms ease; z-index:11 } .modal-content .close:hover { color:#3498db; transform:rotate(540deg) } .modal-content header { position:relative; display:block; border-bottom:1px solid #eee } .modal-content header h2 { margin:0 0 10px; padding:0; font-size:28px } .modal-content article { position:relative; display:block; margin:0; padding:0; font-size:16px; line-height:1.75 } .modal-content footer { position:relative; display:flex; align-items:center; justify-content:flex-en.........完整代码请登录后点击上方下载按钮下载查看
网友评论0